我目前正在尝试为台式机和平板电脑浏览器开发一个简单的网络应用程序。一切都在桌面上完美运行，在平板电脑上也几乎如此，除了一个小的尺寸变化会导致元素被扔到错误的位置。
最初我将所有元素的边距、宽度等定义为我认为会产生一致性的像素值。然而，在桌面版 chrome 中，一个定义为 339px 的元素包括边距是 339px，但在 chrome for android 中，远程调试显示它是 346px，即使使用相同的 CSS 将其定义为 339px，导致重叠，因此布局奇怪。
经过一些挖掘，我听说视口(viewport)元标记会导致移动浏览器上的不同呈现。但是，添加后:
<meta name="viewport" content="width=device-width, initial-scale=1" />
为了尝试强制移动浏览器像桌面浏览器一样运行，浏览器对它的呈现没有任何不同。
最后，我尝试将像素值更改为 em 值，以便在字体大小不同但仍然没有成功的情况下进行更多播放。到目前为止，我的想法已经用完了，因此非常感谢任何指点。
提前致谢!
最佳答案
许多移动浏览器都存在这方面的问题。我怀疑是否有一个众所周知的修复方法。您可以尝试使用 max-width 属性。将此设置为某个上限将有助于将元素包含在父元素中而不是溢出。
对于响应式设计，这里有一个很好的资源可以提供帮助:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
我最近发现了一个在移动设备和桌面浏览器上都能完美运行的网站。
使用开发人员工具检查 CSS。也许您可以从那里得到一些指示。
关于android - 为什么绝对尺寸在移动浏览器上显示为不同尺寸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20700583/