为什么绝对尺寸在移动浏览器上显示为不同尺寸？

Question

我目前正在尝试为桌面和平板电脑浏览器开发一个简单的网络应用。一切都在桌面上完美运行，而在平板电脑上几乎完全如此，除了小尺寸的变化导致元素被扔到错误的位置。

最初，我在像素值中定义了所有元素边距，宽度等，我假设这些元素会创建一致性。然而，在chrome for desktop中，定义为339px的元素（包括边距）为339px，但是对于android而言，远程调试显示它为346px，即使使用相同的CSS将其定义为339px，也会导致重叠并因此产生奇怪的布局。

经过一番挖掘后，我听说可能会在移动浏览器上导致不同渲染的视口元标记。但是，在添加：

之后

<meta name="viewport" content="width=device-width, initial-scale=1" />

为了尝试强制移动浏览器像桌面一样运行，浏览器对其进行了不同的渲染。

最后，我尝试将像素值更改为em值，以便在字体大小不同且仍然没有运气的情况下允许更多播放。我现在已经没有想法，所以任何指针都会非常感激。

提前致谢！

Answer 1

许多移动浏览器都存在此问题。我怀疑是否有一个众所周知的解决方案。您可以尝试使用max-width属性。将其设置为某个上限将有助于包含父级内的元素而不会溢出。

对于响应式设计，这是一个很好的资源，可以提供帮助：

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

我最近遇到了一个在移动设备和桌面浏览器上运行完美的网站。

http://treadsack.com/

使用开发人员工具检查CSS。也许你可以从那里得到一些指示。