1

我正在构建一个需要高度可扩展/响应的 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' />

第一个最大宽度为 640 像素，当我将 Firefox/chrome 窗口的大小调整为较小时，它可以完美运行，但在移动设备上似乎根本不起作用。我的手机是 Droid Razr Maxx，它似乎默认为 960 像素宽度，即使是“纵向”方向也是如此。

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

4

3 回答 3

3

将此元标记放在您的 html 头中：

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

许多现代智能手机试图缩放它们的视口，这会导致一切都失败。此元标记可防止这种缩放。

于 2014-07-30T20:46:33.793 回答
1

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

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

希望这有帮助

于 2012-12-10T16:38:53.530 回答
0

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

看起来“视口”元标记是我最好的新朋友。在我的手机和我办公室同事的 iPhone 上修复了它。

感谢您的建议！

于 2012-12-10T23:37:42.213 回答