Question

我正在构建一个需要高度可扩展/响应的tumblr主题。它几乎只是中心网格中的帖子。我正在使用CSS媒体查询来跟踪浏览器窗口大小，以相应地调整网格大小/居中。他们目前看起来像这样：

<link rel='stylesheet' media='screen and (max-width: 640px)' href='URL.css' />
<link rel='stylesheet' media='screen and (min-width: 640px) and (max-width: 959px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 960px) and (max-width: 1279px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 1280px) and (max-width: 1599px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 1600px) and (max-width: 1919px)' href='URL.css' />

第一个，Maxes以640px宽度输出，当我将firefox / chrome窗口调整为小时，但在移动设备上似乎根本不起作用时效果很好。我的手机是Droid Razr Maxx，它似乎默认为960px宽度，即使是“纵向”方向。

我尝试将样式默认设置为移动大小样式，但得到的结果相同，而且由于其他原因（Internet Explorer为1），这也不是最佳。

Answer 1

将此元标记放在html头中：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

许多现代智能手机试图扩大其视口，从而将所有东西都抛弃。此元标记可防止此缩放。

Answer 2

我经常处理查询 - 问题有时候你在移动浏览器中看到的并不是设备规格所说的精确像素数，特别是如果你在头部使用任何类型的缩放。我喜欢做的是使用一个非常简单的jquery警报检查视口/文档的大小，以确切地确定我正在使用的维度。 http://responsejs.com/labs/dimensions/是一个很棒的网站，可以向您展示捕捉视口宽度和高度的各种方法。

我也更喜欢使用'all and ....'而不是'screen and ....'

希望这有帮助

Answer 3

发现这个人： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

看起来像“viewport”元标记是我最好的朋友。修正了我的手机和办公室伙伴的iPhone。

感谢您的建议！

CSS媒体查询对移动设备没有影响

3 个答案: