Question

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

该页面当前包含此视口元标记：

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

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

样式表应该以宽度R＆lt; 640px，640px＆lt; = R＆lt; 960px和960px＆lt; = R.布局分别为320px，640px和960px宽。

我面临的问题是我的智能手机（可能还有所有现代高像素密度手持设备）。我的智能手机的物理分辨率为480x800px，但在横向模式下，报告宽度为533px（其像素比为1.5和800 / 1.5 = 533.33，所以我猜这是预期值）。自533＆lt; 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

这个问题/答案可能会对您有所帮助：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可以确认）。

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)

媒体查询和设备像素比率

2 个答案: