我有一个网站 (http://www.sealinesd.com) 大部分时间都可以正常工作...但有时浏览器（Firefox 和 Chrome）会确定错误的屏幕尺寸并显示错误的网站。同一台计算机在两种不同的浏览器上会以不同的方式显示它：一个浏览器将确定屏幕为 960-1240，而另一个浏览器将正确地看到它超过 1240。我无法弄清楚这一点。任何人都有一些很好的工具来解决这个问题，或者更好的是，知道问题可能是什么？
【问题讨论】：
标签： css google-chrome firefox web responsive-design
好的，我想通了。我的一些浏览器有一点点缩放。这搞砸了浏览器像素大小的读取方式，因为浏览器缩放基本上会拉伸像素：1024x768 屏幕上的 200% 缩放将被读取为 612x384 屏幕。我将 CSS 中的媒体查询更改为使用 em 而不是像素，从而解决了这个问题。如果您遇到此问题，只需进入样式表并将像素更改为 em，方法是将像素除以 16 并在末尾添加“em”而不是“px”。
示例：“@media only screen and (min-width:960px) and (max-width:1240px) {”
将成为“@media only screen and (min-width: 60em) and (max-width: 77em) {”
现在用户可以在不更改查询的情况下进行缩放，因为 em（字母“m”的长度）是基于文本大小的度量，它与页面成比例地变化。
【讨论】：