移动网站应该优化哪个分辨率？

Question

我有困难理解移动分辨率是如何工作的。据我所知，标准网站移动分辨率为320像素宽。问题似乎出现在iPhone 4上，它似乎拥有640像素宽的屏幕分辨率，但却以320像素显示网页。

这里的解决方案是什么？我是否需要为320像素和640像素屏幕编写两种不同的分辨率？如何强制iPhone 4显示640像素的网页？

- Frantisek

---

你可以使用媒体查询和min/max-width来使用不同的样式表。不确定如何在iPhone上强制分辨率。也许jQuery Mobile是一个值得研究的地方？ - Smamatti

Answer 1

我发现最小宽度为320px的网站在大多数高端移动设备上（如iPhone，Android和Nokia N97）看起来很好。以下是一些最流行设备的屏幕分辨率：

"iPhone 320 x 480"

"iPhone 4 320 x 480（放大了2倍）"

"HTC Legend 320 x 480"

- paul thomas

---

欢迎来到 Stack Overflow！感谢您的帖子！请勿在帖子中使用签名/标语。您的用户框已经算作了您的签名，您可以使用您的个人资料发布任何关于自己的信息。有关签名/标语的常见问题解答 - Andrew Barber

Answer 2

基本上，正如您所注意到的那样，iPhone 4+的分辨率为640px，但是由于多种原因，浏览器仅显示其中的320px。有关此过程的更多详细信息，请参见此其他答案：web应用的320px分辨率。

该回答还谈到了一个事实，即您可以为网站指定视口以强制在iphone上以640px查看它，但是您不应该这样做，而只需将使用的图像分辨率加倍即可。

- Cosmin Atanasiu

Answer 3

由于 iPhone 4 的像素数量是 iPhone 3 的两倍，这意味着为 iPhone 3 优化的每个网站都会在显示屏上变得非常小。 因此，引入了 devicePixelRatio，以保持网站的大小（以毫米或英寸为单位）同时将物理像素翻倍，从而有效地使双倍分辨率（视网膜）图像和字体更加清晰，但仍保留旧的 CSS 字体和像素大小。

iPhone 4 和 5 上的设备像素比为 2:1。 这意味着在 CSS 中定义为 100 x 100 像素的图片实际上占用了 200 x 200 物理像素。因此，您仍然可以使用 320 像素的 CSS 样式来设计页面；320 dips - 设备独立像素。

请注意，设备像素比也存在于 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。

- Ben

Answer 4

你可以使用自适应布局，就像this网站上使用的那样（尝试减小浏览器窗口的宽度以查看网站的适应性）。这种设计也在这个博客文章中讨论过。

或者你可以使用媒体查询来为不同的分辨率创建单独的布局。

- Christofer Eliasson

---

我并没有问如何做到这一点，我问的是为什么iPhone 4的屏幕只有640像素，却无法显示比320像素更大的网站。 - Frantisek

@RiMMER 因为市场营销所称的“视网膜显示屏”。 - JustSid

@RiMMER 顺便说一句，你没有问为什么iPhone 4有一个640像素的屏幕，而是如何处理它。你已经得到了答案... - JustSid

@RiMMER 好的，你问了“解决方案是什么？”。一个通用的解决方案是设计适应浏览器的分辨率，无论设备如何。所以我真的不明白为什么会被投反对票。 - Christofer Eliasson

Answer 5

<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){}

这就是分辨率将如何处理的方式。

- equerambug

Answer 6

最常见的移动屏幕尺寸包括320x240、480x320、800x480、960x480、1024x800和1024x768。

- Thilanka De Silva

---

这个回答与问题无关。 - Stephen Corwin

Answer 7

你可以使用这行代码：

<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />

当它检测到你的屏幕宽度小于480像素时，它将使用那个CSS样式。如果不是，则会使用之前你所用的普通CSS样式。

- Andrew Ng

---

在 mobile.css 文件中，您可以定义横向和纵向方向的 CSS 规则。例如：@media screen and (orientation:portrait) { 在此处添加 CSS } - Andrew Ng

针对横屏的媒体查询：@media screen and (orientation:landscape) { 在此处添加CSS } - Andrew Ng

顺便提一下，480像素是iPhone4显示屏的宽度。我不知道你从哪里得到320像素或640像素。 - Andrew Ng

这正是我所做的 - 我编写了一个640像素的网站，但当我在iPhone4上打开它时，我只看到了一半 - 320像素。 - Frantisek

那么按照我之前说的，将它更改为 <link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 640px)" /> 并尝试使用 display:none 看看是否有效。 - Andrew Ng