确保显示器不拿起手机

Question

@media查询我建立的一个具有使用@media查询四种不同的布局，一个漂亮的模板：

850 + PX宽度
< 850像素宽度
iphone景观
iphone肖像

它工作真棒，直到你的尺寸显示器窗口向下跌破480像素（iphone景观），然后它开始拿起小尺寸@media查询。

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

Answer 1

我个人认为在较小的浏览器窗口大小下显示“iPhone”布局是可取的，因为您的内容可能已针对该布局进行了优化，但是如果您真的想要阻止此操作，您可以使用device-width财产@media声明。类似@media only screen and (max-device-width: 720px) { ... }的目标将以设备宽度而不是视口宽度为目标。比较this（视口宽度）与this（设备宽度）的行为。玩弄数值（更改min至max，更改像素大小等）并观察行为。另外，不要忘记你可以结合@media规则，例如@media (min-width: 400px) and (max-width: 600px) { ... }。看看什么适合你。

这种方法的问题是，移动设备有各种形状和大小，所以你可能会认为你没有计划在不同的移动设备（让我们只说一个Android手机......）上投放不受欢迎的风格。但是，根据您的需求，这可能对您无关紧要。

这里是一个示例媒体查询和大小的列表，以指导您，如果您决定走这条路线：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/（对于缺乏工作链接感到抱歉;显然我在StackOverflow上不够酷，无法发布多个链接还）...