媒体查询和设备像素比

Question

我正在重新设计我的网站，决定尝试响应式布局。我对CSS3媒体查询不熟悉，无法让网站在智能手机上按照预期表现。

当前页面有以下视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我不确定它的作用是什么，因为我在HTML中有或没有这个东西都看不出区别，但被告知它在某种程度上很有用。

样式表应该针对宽度小于640像素、640像素<=宽度<960像素和960像素<=宽度的情况进行设置。布局将分别为320像素、640像素和960像素宽。

我的问题是关于智能手机（以及可能所有现代高像素密度的手持设备）。我的智能手机具有480x800像素的物理分辨率，但在横向模式下，宽度报告为533像素（其像素比为1.5，800/1.5 = 533.33，所以我猜这是预期值）。由于533 < 640，显示的布局是最窄的：320像素。我知道中等大小的布局在智能手机上看起来很好，而且希望使用它。我应该怎么做才能使智能手机在横向模式下显示640像素的布局，而不会破坏适用于1:1像素比桌面浏览器的当前规则？

每个布局的当前媒体查询（分别为320、640、960）如下：

@media only screen and (max-width: 639px)

@media only screen and (min-width: 640px) and (max-width: 959px)

@media only screen and (min-width: 960px)

- mingos

---

这个问题可能会对你有所帮助：https://dev59.com/PGsz5IYBdhLWcg3wxax3 - cchana

没问题。我多说了一点，希望对其他人有用。 - cchana

Answer 1

这个问题/答案可能对您有帮助：是否有与iPhone上Safari的<meta name='viewport' content='target-densitydpi=device-dpi'>相当的Android等价物？，该文章指向了这篇非常有用的文章：http://davidbcalhoun.com/2010/viewport-metatag。

<meta name="viewport" content="target-densitydpi=device-dpi" />

提醒您，这似乎是适用于Android的合适解决方案，但在iOS设备上可能不起作用（没有Mac或iPhone手边以确认）。

- cchana

---

后面的链接已经损坏。 - Artemis

Answer 2

我宁愿使用媒体查询：

    @media only screen and (max-width: 639px) and (-Webkit-min-device-pixel-ratio: 1.5), 
    @media only screen and (max-width: 639px) and (-moz-min-device-pixel-ratio: 1.5),
    @media only screen and (max-width: 639px) and (-o-min-device-pixel-ratio: 3/2),
    @media only screen and (max-width: 639px) and (min-device-pixel-ratio: 1.5),
    @media only screen and (min-width: 640px) and (max-width: 959px)

- Rémy DAVID