媒体查询和设备像素比

Question

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

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

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

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

样式表的目标宽度应为 R < 640px、640px <= R < 960px 和 960px <= R。布局的宽度将分别为 320px、640px 和 960px。

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

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

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

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