移动网站应该针对什么分辨率进行优化？
我无法理解移动分辨率的工作原理。据我所知，标准网站移动分辨率是 320px 宽度。问题似乎出在 iPhone 4 上，它的屏幕分辨率似乎为 640 像素宽度，但它以 320 像素显示网页。
这里的解决方案是什么？我是否为 320px 和 640px 屏幕编写 2 种不同的分辨率？如何强制 iPhone 4 显示 640 像素网页？
I'm having trouble understanding how the mobile resolution works. From what I know, standard website mobile resolution is 320px width. The problem seems to be with iPhone 4, which seems to have 640px width screen resolution, but yet, it displays web in 320px.
What is the solution here? Do I code 2 different resolutions for 320px and 640px screens? How do I force iPhone 4 to display 640px web?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
基本上，正如您所注意到的，iPhone 4+ 分辨率为 640 像素，但由于多种不同原因，浏览器仅显示其中的 320 像素。检查此其他答案以了解有关此情况如何发生的更多详细信息：Web 应用程序的 320 像素分辨率
这还讨论了这样一个事实：您可以指定网站的视口以强制其以 640 像素显示在 iPhone 上，但你不应该这样做，而只需将你使用的图像的分辨率加倍即可。
Well basically, as you've noticed, iPhone 4+ resolution is 640px, but the browser only displays 320px of it, for a number of different reasons. Check this other answer for more details on how this is happening:320px resolution for web apps
That also talks about the fact that you can specify the viewport for a website to force it to be seen in 640px on an iphone, but that you shouldn't do that, but just double the resolution on the image you use.
我发现最小宽度为 320 像素的网站在大多数高端移动设备（例如 iPhone、Android 和诺基亚 N97）上看起来效果不错。最流行设备的一些屏幕分辨率：
“iPhone 320 x 480”
“iPhone 4 320 x” 480（缩放至 2 倍）”
“HTC Legend 320 x 480”
I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97.Some of the screen resolutions of most popular devices:
"iPhone 320 x 480"
"iPhone 4 320 x 480 (scaled by a factor of 2)"
"HTC Legend 320 x 480"
您可以使用自适应布局，例如 此 网站上使用的布局（尝试减小浏览器窗口的宽度以查看该网站适应）。这篇博客文章也讨论了该设计。
或者，您可以使用媒体查询为不同的分辨率创建单独的布局。
Either you can use an adaptive layout, like used on this website (try decrease the width of your browser window to see the site adapt). That design is also discussed in this blog post.
Or you create separate layouts for different resolutions all together using media queries.
由于从 iPhone 3 到 iPhone 4，像素数量增加了一倍，这意味着每个针对 iPhone 3 优化的网站在显示屏上都会变得很小。
因此，引入了 devicePixelRatio，以保留网站的大小（以毫米或英寸为单位），同时将物理像素加倍，有效地使双分辨率（视网膜）图像和字体更加清晰，但保留旧的 CSS 字体和像素大小。
iPhone 4 和 5 上的 devicePixelRatio 为 2:1。
这意味着在 css 中定义的 100100px 图像实际上将占用 200x200 物理像素。所以你仍然可以对总宽度为 320px 的页面进行 css 样式； 320 个凹陷 - 与设备无关的像素。
请注意，devicePixelRatio 也存在于 Android 上，其范围从 1.5 到 3。
更多信息：
http://www.quirksmode.org/blog/archives/2012/06 /devicepixelrati.html 和
http://www.quirksmode.org/blog/archives/2012/07 /more_about_devi.html
Because the number of pixels has doubled from iPhone 3 to iPhone 4, it would have meant every website optimized for the iPhone 3 would then be ... tiny on the display.
Hence, a devicePixelRatio was introduced, to retain the size of the websites (in mm or inches) while doubling the physical pixels, efficiently making double resolution (retina) images and fonts much sharper, but retaining old CSS font and pixel sizes.
The devicePixelRatio is 2:1 on iPhone 4 and 5.
That means an image defined in css with 100100px will actually take up 200x200 physical pixels. So you can still css-style the page with 320px total width; 320 dips - device independent pixels.
Note that the devicePixelRatio also exists on Android, where it ranges from 1.5 up to 3.
More information:
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html and
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
这样CSS将分别加载横向和纵向的CSS。
这就是决议的处理方式。
This way CSS will load separately for landscape and protrait.
This is how the resolution will be handled.
最常见的移动设备屏幕尺寸为 320x240、480x320、800x480、960x480、1024x800 和 1024x768。
The most common mobile screen sizes are 320x240, 480x320, 800x480, 960x480, 1024x800, and 1024x768.
你使用这行代码：
当它检测到你的屏幕宽度小于 480px 时，它将使用该 css。如果没有，它将使用您之前使用过的普通 css
you use this line of code:
When it detects your screen to be less than 480px in width, it will use that css. If not, it will use the normal css you used before