2

我正在重新设计我的网站，我决定尝试响应式布局。我是 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。我知道中号在智能手机上看起来不错，并且更愿意使用它。我应该怎么做才能让智能手机在横向模式下显示 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)
4

2 回答 2

3

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

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

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

于 2012-05-10T10:15:47.383 回答
1

我宁愿使用媒体查询：

    @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)
于 2013-01-08T14:06:03.857 回答