确保监视器不会获取移动设备的@media查询

Question

我使用@media查询构建了一个包含四种不同布局的漂亮模板：

850 + px宽度
＆lt; 850px宽度
iphone风景
iphone肖像

它工作得很棒，直到你将显示器窗口缩小到480px以下（iphone风景），然后它开始拾取较小的@media查询。

有什么方法可以避免这种情况吗？

Answer 1

我个人觉得在较小的浏览器窗口尺寸下显示“iPhone”布局是合乎需要的，因为您的内容可能已经针对该布局进行了优化，但是，如果您真的想要阻止它，您可以使用{{您device-width声明中的1}}属性。像@media这样的东西会以设备宽度而不是视口宽度为目标。比较this（视口宽度）与this（设备宽度）的行为。玩弄值（将@media only screen and (max-device-width: 720px) { ... }更改为min，更改像素大小等）并观察行为。另外，请不要忘记您可以合并max个规则，例如@media。看看哪些适合你。

这种方法存在的问题是移动设备的形状和大小各不相同，因此您可能会在不同的移动设备上使用不合适的样式（我们只是说Android手机......）。但是，根据您的需要，这对您来说无关紧要。

以下是一个示例媒体查询和大小的列表，以指导您，如果您决定采用这条路线：@media (min-width: 400px) and (max-width: 600px) { ... }（抱歉缺少工作链接;显然我在StackOverflow上不够酷发布多个链接）...