我在移动页面项目的后期遇到了问题。客户要求支持iPhone和各种Android移动设备，而不是仅支持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？
由于
答案 0 :(得分：2)
你应该使用：
<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 ）。
这个2x缩放非常有用，因为例如你可以设置font-size：14px，并且该文本的感知大小将与在iPhone 3G上查看14px文本时的感知大小相同（因为它实际上将使用iPhone 4上有28个物理设备像素，可以补偿更高的dpi）。如果只使用14个物理设备像素显示你的font-size：14px文本，它在iPhone 4上看起来很小（是iPhone 3G上的一半）。
现在，有一个结果：您的网站必须设计为320px宽度，而不是640px。但事实确实如此，因为iOS从未支持target-densityDpi = device-dpi，所以通过设置width = device-width，你无论如何都有效地放宽了=。
那么为什么要使用width = 320而不是width = device-width？既然你说你的网站是一个固定宽度的布局，那么宽度=设备宽度，如果它显示在不同尺寸的设备上，它可能看起来很糟糕，例如，你可能会看到右侧的白色边缘更宽设备，而宽度= 320，浏览器将其缩放以适应设备的屏幕宽度（因此可能看起来有点放大，但这可能比有白色边缘更好）。
但是，请考虑这是一个权宜之计：保持宽度=设备宽度会更好，并将您的网站设计修改为灵活而不是固定宽度（例如设置宽度：100％on您的div和图像而不是宽度：320px）。有关详细信息，请参阅http://www.html5rocks.com/en/mobile/responsivedesign/
最后，如果你真的不希望用户能够放大和缩小，你可以保留“，user-scalable = no”这个术语，但出于可访问性的原因，通常最好省略它，除非你'重新设计移动maps.google.com之类的东西，你可以手动处理缩放缩放手势，而不想让浏览器干涉。