媒体查询和 firefox/chrome答案

【问题标题】：media queries and firefox/chrome媒体查询和 firefox/chrome
【发布时间】：2012-04-18 22:56:31
【问题描述】：

嗨，我有一个被 ios 模拟器接收的媒体查询

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="css/iphone.css">

我想做的是通过调整浏览器的大小在 Firefox 或 chrome 上模拟这个，这可能吗？

【问题讨论】：

【解决方案1】：

<link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" />

【讨论】：

【解决方案2】：

您需要使用max-width。 max-device-width 是物理屏幕尺寸，因此不会改变。见：What is the difference between max-device-width and max-width for mobile web?

但是，这并不能完全解决您在 iOS 上的问题，因为 Safari 默认报告的宽度（但不是设备宽度）为 980 像素，因此不是为移动设备设计的页面会显示为完全缩小的页面。因此，您还需要在 HTML 中添加类似这样的内容：

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

【讨论】：

【解决方案3】：

是的，您可以直接在 Firefox 和 chrome 上进行模拟。但是 Firefox 不支持低于 480 的媒体查询。

您还可以查看以下链接以在 Firefox 和 chrome 中重新调整大小。 http://www.smashingmagazine.com/

希望对你有帮助

【讨论】：