我在一个移动页面项目的后期遇到了一个问题。客户要求同时支持 iPhone 和各种安卓移动设备，而不是只支持 iPhone。
移动页面是用 XHTML 编写的，html 页面宽度为 640px，其元素有宽度，例如500px, %20...所以页面在 iPhone 的 safari 中看起来很棒，但在其他设备的浏览器中很难看。
<meta name="viewport" content="user-scalable=no, width=device-width, target-densityDpi=device-dpi,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5;">
我试图通过玩视口来解决这个问题，但已经挣扎了很长时间。我的想法是关于初始规模，有人可以建议一种动态分配此值 = device-width/640 的方法吗？
谢谢
【问题讨论】：
标签： javascript xhtml mobile-safari viewport
你应该只使用：
<meta name="viewport" content="width=320">
为什么是 320？这是因为虽然 iPhone 4 的屏幕纵向为 640 像素宽，但它是一个“视网膜”显示器，其有效 dpi 是桌面屏幕的两倍。因此，它的 window.devicePixelRatio 为 2，这意味着它的设备宽度仅为 640/2 = 320 CSS px，即每个 CSS px 占用 2x2 平方的物理设备像素（有关详细信息，请参阅this article on QuirksMode）。
这种 2 倍缩放非常有用，因为例如您可以设置 font-size:14px 并且该文本的感知大小将与您在 iPhone 3G 上查看 14px 文本的大小相同（因为它实际上会使用iPhone 4 上的 28 个物理设备像素，用于补偿更高的 dpi）。相反，如果您的 font-size:14px 文本仅使用 14 个物理设备像素显示，那么它在 iPhone 4 上看起来会很小（大小只有 iPhone 3G 上的一半）。
现在，这样做的后果是：您的网站必须设计为 320 像素宽度，而不是 640 像素。但这已经是真的了，因为 iOS 从来没有支持 target-densityDpi=device-dpi，所以通过设置 width=device-width 无论如何你实际上是设置了 width=320。
那么为什么要使用 width=320 而不是 width=device-width？既然您说您的网站是一个固定宽度的布局，那么使用 width=device-width 如果它显示在不同尺寸的设备上可能看起来很糟糕，例如，您可能会在较宽的右侧看到一个白色边距设备，而当 width=320 时，浏览器会将其放大以适应设备的屏幕宽度（因此它可能看起来有些放大，但这可能比留白要好）。
但是，请将此视为权宜之计：最好保持 width=device-width，并将您的网站设计修改为灵活而不是固定宽度（例如设置 width:100% on您的 div 和图像，而不是 width:320px)。欲了解更多信息，请参阅http://www.html5rocks.com/en/mobile/responsivedesign/
最后，如果您真的不希望用户能够放大和缩小，您可以保留“, user-scalable=no”一词，但出于可访问性的原因，通常最好省略它，除非您'重新设计类似 mobile maps.google.com 的东西，您在其中手动处理捏缩放手势并且您不想浏览器干扰。
【讨论】：