媒体查询和设备像素比答案

【问题标题】：Media queries and device pixel ratio媒体查询和设备像素比
【发布时间】：2012-05-18 18:01:53
【问题描述】：

我正在重新设计我的网站，并决定尝试响应式布局。我是 CSS3 媒体查询的新手，不知道如何让网站在我的智能手机上按预期运行。

页面当前有这个视口元标记：

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

我不确定它的作用，因为我看不出在我的 HTML 中拥有和不拥有它之间的区别，但有人告诉我它在某种程度上很有用。

样式表的目标宽度应该是 R

我面临的问题是我的智能手机（可能还有所有现代高像素密度手持设备）。我的智能手机的物理分辨率为 480x800px，但在横向模式下，报告的宽度为 533px（它的像素比为 1.5 和 800/1.5 = 533.33，所以我猜这是预期值）。由于 533

每个布局（分别为 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)

【问题讨论】：

这个问题可能对你有帮助：stackoverflow.com/questions/7674247/…
没问题。有点冗长，所以希望它对其他人也有用。

标签： css media-queries smartphone pixel-ratio

【解决方案1】：

这个问题/答案可能会对您有所帮助：Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone? 这反过来又指向这篇非常有用的文章：http://davidbcalhoun.com/2010/viewport-metatag

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

应该让您知道这似乎是适用于 Android 的解决方案，但可能不适用于 iOS 设备（手头没有 Mac 或 iPhone 来确认）。

【讨论】：

后面的链接坏了

【解决方案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)

【讨论】：