媒体查询和设备像素比率

Question

我正在重新设计我的网站，我决定尝试响应式布局。我是 CSS3 媒体查询的新手，无法弄清楚如何使网站在我的智能手机上按预期运行。

该网页当前具有以下视区元标记：

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

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

样式表的目标宽度为 R <640px、640px <= R <960px

和 960px <= R。布局将分别为 320px、640px 和 960px 宽。

我面临的问题是我的智能手机(可能还有所有现代高像素密度手持设备(。我的智能手机的物理分辨率为 480x800 像素，但在横向模式下，报告的宽度为 533px(其像素比为 1.5,800/1.5 = 533.33，所以我想这是预期值(。由于 533 <640，显示的布局是最窄的：320px。我知道中等的在智能手机上看起来不错，并且更喜欢使用它。我应该怎么做才能使智能手机以横向模式显示 640px 布局，而不会违反适用于像素比为 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)

Answer 1

这个问题/答案可能会帮助你： 有没有等同于iPhone上Safari的Android<元名称 内容="target-densitydpi=device-dpi">？ 这反过来又指向这篇非常有用的文章： http://davidbcalhoun.com/2010/viewport-metatag

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

应该让您意识到这似乎是适合Android的解决方案，但可能不适用于iOS设备(手头没有Mac或iPhone进行确认(。

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)