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