我无法理解移动分辨率的工作原理。据我所知，标准网站移动分辨率为 320px 宽度。问题似乎出在 iPhone 4 上，它的屏幕分辨率似乎是 640px 宽度，但它以 320px 显示网页。
这里的解决方案是什么？我是否为 320 像素和 640 像素的屏幕编写了 2 种不同的分辨率？如何强制 iPhone 4 显示 640px 网页？
【问题讨论】：
标签： iphone css screen-resolution
基本上，正如您所注意到的，iPhone 4+ 的分辨率为 640 像素，但浏览器仅显示 320 像素，原因有很多。查看其他答案以了解有关此情况的更多详细信息：320px resolution for web apps
这还谈到了这样一个事实，即您可以为网站指定视口以强制它在 iphone 上以 640 像素显示，但您不应该这样做，而只是将您使用的图像的分辨率提高一倍。
【讨论】：
我发现最小宽度为 320 像素的网站在大多数高端移动设备（如 iPhone、Android 和诺基亚 N97）上看起来都不错。大多数流行设备的一些屏幕分辨率：
“iPhone 320 x 480”
“iPhone 4 320 x 480（缩放 2 倍）”
“HTC 传奇 320 x 480”
【讨论】：
您可以使用自适应布局，就像在this 网站上使用的那样（尝试减小浏览器窗口的宽度以查看网站适应情况）。此blog post 中也讨论了该设计。
或者您使用media queries 一起为不同的分辨率创建单独的布局。
【讨论】：
因为从 iPhone 3 到 iPhone 4，像素数量翻了一番，这意味着每个针对 iPhone 3 优化的网站都将……在显示屏上变得很小。 因此，引入了 devicePixelRatio，以保留网站的大小（以毫米或英寸为单位），同时将物理像素加倍，有效地使双分辨率（视网膜）图像和字体更加清晰，但保留旧的 CSS 字体和像素大小。
iPhone 4 和 5 上的 devicePixelRatio 为 2:1。 这意味着在 css 中定义为 100100px 的图像实际上将占用 200x200 物理像素。所以你仍然可以对总宽度为 320px 的页面进行 css 样式化； 320 dips - 与设备无关的像素。
请注意，Android 上也存在 devicePixelRatio，其范围从 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
【讨论】：
<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">
这样 CSS 将分别加载横向和纵向。
@media (min-width: 500px) and (max-width: 640px){}
@media (min-width: 320px) and (max-width: 400px){}
这就是处理分辨率的方式。
【讨论】：
最常见的移动屏幕尺寸是 320x240、480x320、800x480、960x480、1024x800 和 1024x768。
【讨论】：
你使用这行代码：
<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />
当它检测到您的屏幕宽度小于 480 像素时，它将使用该 css。如果没有，它将使用您之前使用的普通 css
【讨论】：