固定宽度的移动网页,支持多种设备
我在移动页面项目的后期遇到了一个问题。客户要求同时支持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 的方法吗?
谢谢
I came to a problem on the later stage of a project for a mobile page. Client asked to support both iPhone and various android mobile devices instead of supporting iPhone only.
The mobile page was written in XHTML, with html page width 640px, and its elements have width,e.g. 500px, %20... so the page look great in iPhone's safari with the following viewport, but ugly in other devices's browsers.
<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;">
I was trying to solve the problem by playing with viewport, but have being struggling for a long time. My idea is about the initial-scale, can someone suggest a way to dynamic assign this value = device-width/640 ?
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

你应该只使用:
为什么是 320?这是因为,尽管 iPhone 4 的屏幕纵向宽度为 640 像素,但它是“视网膜”显示屏,有效 dpi 是桌面屏幕的两倍。因此它的 window.devicePixelRatio 为 2,这意味着它的设备宽度仅为 640/2 = 320 CSS px,即每个 CSS px 占用 2x2 平方的物理设备像素(参见 这篇关于 QuirksMode 的文章了解更多信息 细节)。
这种 2 倍缩放非常有用,因为例如您可以设置 font-size:14px,并且该文本的感知大小将与您在 iPhone 3G 上查看 14px 文本相同(因为它实际上会使用 28 个物理设备显示) iPhone 4 上的像素,以补偿较高的 dpi)。相反,如果您的 font-size:14px 文本仅使用 14 个物理设备像素显示,则它在 iPhone 4 上看起来会很小(大小是 iPhone 3G 上的一半)。
现在,这样做的结果是:您的网站必须设计为 320 像素宽度,而不是 640 像素。但这已经是事实了,因为 iOS 从来不支持 target-desiredDpi=device-dpi,所以通过设置 width=device-width,无论如何你实际上都设置了 width=320。
那么为什么使用 width=320 而不是 width=device-width 呢?既然您说您的网站是固定宽度布局,那么使用 width=device-width 如果在不同尺寸的设备上显示,它可能看起来很糟糕,例如,您可能会在更宽的右侧看到白色边距设备,而当 width=320 时,浏览器会将其放大以适应设备的屏幕宽度(因此它可能看起来有些放大,但这可能比使用白边更好)。
但是,请将此视为权宜之计:最好保持 width=device-width,并将站点设计修改为灵活而不是固定宽度(例如在 div 上设置 width:100% ,图片而不是宽度:320px)。有关详细信息,请参阅http://www.html5rocks.com/en/mobile/responsivedesign/< /a>
最后,如果您确实不希望用户能够放大和缩小,则可以保留“, user-scalable=no”术语,但出于可访问性的原因,通常最好忽略此术语,除非您'重新设计一些东西例如移动版maps.google.com,您可以手动处理捏合缩放手势,并且不希望浏览器干扰。
You should just use:
Why 320? It's because although the iPhone 4's screen is 640 pixels wide in portrait, it's a "retina" display with twice as high effective dpi as desktop screens. Hence it has a window.devicePixelRatio of 2, which means that its device-width is only 640/2 = 320 CSS px, i.e. each CSS px takes up a 2x2 square of physical device pixels (see this article on QuirksMode for more details).
This 2x scaling is very useful, because for example you can set font-size:14px and the perceived size of that text will be the same as if you viewed 14px text on an iPhone 3G (since it will actually be displayed using 28 physical device pixels on the iPhone 4, which compensates for the higher dpi). If instead your font-size:14px text was shown using only 14 physical device pixels, it would look tiny on the iPhone 4 (half the size that it would on a iPhone 3G).
Now, there is a consequence of this: your site has to be designed for 320px width, not 640px. But that was already true, since iOS has never supported target-densityDpi=device-dpi, so by putting width=device-width you were effectively putting width=320 anyway.
So why use width=320 instead of width=device-width? Since you say that your site is a fixed-width layout, then with width=device-width it is likely to look bad if it is shown on different size devices, for example you might see a white margin down the right hand side on wider devices, whereas with width=320 the browser will scale it up to fit the device's screen width (it may therefore look somewhat enlarged, but that's probably better than having a white margin).
However, please just consider this a stop-gap measure: it would be much better to keep width=device-width, and modify your site design to be flexible instead of fixed-width (for example set width:100% on your divs and images instead of width:320px). For more information, see http://www.html5rocks.com/en/mobile/responsivedesign/
Finally, you can keep the ", user-scalable=no" term if you really don't want the user to be able to zoom in and out, but for accessibility reasons it's often better to omit this, unless you're designing something like mobile maps.google.com, where you're manually handling pinch zoom gestures and you don't want to browser to interfere.