媒体查询和设备像素比(Media queries and device pixel ratio)

我在重新设计自己的网站的过程中，我决定采取在响应布局了一枪。 我是新的CSS3媒体查询，不能弄清楚如何使网站表现为预期在我的智能手机。

该网页目前有这个视meta标签：

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

我不知道它做什么，因为我没有看到有和我的HTML没有这之间的差异，但被告知，它在某种程度上是有用的。

样式表应该靶向宽度 - [R <640像素，640像素<= R <960像素960像素和<= R.布局将分别是320像素，640像素960像素和宽。

我现在面临的问题是与我的智能手机（也可能是所有现代的高像素密度的手持设备）。 我的智能手机有480x800px的物理分辨率，而在横向模式下，报告的533px（其像素比为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)

Answer 1:

这个问题/答案可以帮助你： 是否有任何相当于Android的<META NAME =“视”含量=“目标densitydpi =设备DPI”> Safari浏览器在iPhone上？ 这反过来又指向这个非常有用的文章： 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)

文章来源: Media queries and device pixel ratio