CSS 移动网站应该针对什么分辨率进行优化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9349690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What resolution should a mobile website be optimized for?
提问by Richard Rodriguez
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.
我无法理解移动分辨率的工作原理。据我所知，标准网站移动分辨率为 320px 宽度。问题似乎出在 iPhone 4 上，它似乎具有 640 像素宽度的屏幕分辨率，但它以 320 像素显示网页。
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?
这里的解决方案是什么？我是否为 320px 和 640px 屏幕编写了 2 种不同的分辨率？如何强制 iPhone 4 显示 640 像素的网页？
采纳答案by Cosmin Atanasiu
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
基本上，正如您所注意到的，iPhone 4+ 的分辨率是 640 像素，但浏览器仅显示 320 像素，原因有很多。查看其他答案以了解有关如何发生的更多详细信息：Web 应用程序的 320 像素分辨率
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.
这也谈到了一个事实，即您可以指定网站的视口以强制它在 iphone 上以 640px 显示，但您不应该这样做，而只是将您使用的图像的分辨率提高一倍。
回答by paul thomas
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:
我发现最小宽度为 320 像素的网站在 iPhone、Android 和诺基亚 N97 等大多数高端移动设备上看起来不错。 一些最流行设备的屏幕分辨率：
"iPhone 320 x 480"
“iPhone 320 x 480”
"iPhone 4 320 x 480 (scaled by a factor of 2)"
“iPhone 4 320 x 480（按 2 倍缩放）”
"HTC Legend 320 x 480"
“HTC 传奇 320 x 480”
回答by Christofer Eliasson
Either you can use an adaptive layout, like used on thiswebsite (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.
或者您使用媒体查询为不同的分辨率创建单独的布局。
回答by Ben
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.
因为从 iPhone 3 到 iPhone 4，像素数量翻了一番，这意味着每个针对 iPhone 3 优化的网站都将……在显示屏上变得很小。因此，引入了 devicePixelRatio，以保留网站的大小（以毫米或英寸为单位），同时将物理像素加倍，有效地使双分辨率（视网膜）图像和字体更加清晰，但保留旧的 CSS 字体和像素大小。
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.
iPhone 4 和 iPhone 5 上的 devicePixelRatio 为 2:1。这意味着在 css 中定义的 100100px 图像实际上将占用 200x200 物理像素。所以你仍然可以用 320px 的总宽度来设置页面的 css 样式；320 下降 - 设备独立像素。
Note that the devicePixelRatio also exists on Android, where it ranges from 1.5 up to 3.
请注意，在 Android 上也存在 devicePixelRatio，它的范围从 1.5 到 3。
More information: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.htmland http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
更多信息：http: //www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html和 http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
回答by Thilanka De Silva
The most common mobile screen sizes are 320x240, 480x320, 800x480, 960x480, 1024x800, and 1024x768.
最常见的移动屏幕尺寸是 320x240、480x320、800x480、960x480、1024x800 和 1024x768。
回答by equerambug
<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">
This way CSS will load separately for landscape and protrait.
这样 CSS 将分别为横向和纵向加载。
@media (min-width: 500px) and (max-width: 640px){}
@media (min-width: 320px) and (max-width: 400px){}
This is how the resolution will be handled.
这就是决议的处理方式。
回答by Andrew Ng
you use this line of code:
你使用这行代码：
<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />
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
当它检测到您的屏幕宽度小于 480 像素时，它将使用该 css。如果没有，它将使用您之前使用的普通css
