Question

我在我的css中使用媒体查询：

/* Tablet */
@media (max-width: 979px){
 }
/* Phone */
@media (max-width: 767px){
}

当我在台式电脑上拖动我的浏览器时，它会切换到手机布局，有没有办法防止这种情况，所以只能在手机上看到小尺寸？

Answer 1

确实没有必要这样做。这是响应点，它与设备无关。因此，如果用户在桌面上访问您的网站，但他们的浏览器非常瘦，那么内容将适合它（例如Windows 8 Metro IE10侧边栏）。你不想只把它限制在手机上，一旦你做完了，你就会走上一条并不意味着要带着敏感的道路旅行。

Answer 2

当然可以，但问题是你真的认为它的过度需要是有效的吗？

您可以为电话设备的HTML标记添加一个类（使用JavaScript或任何其他方法来验证它是否是手机）并在@media中使用此类，因此只有在应用此类时媒体查询将生效，小例子：

HTML：

<html class="phone-device">

</html>

CSS：

/* Phone */
@media (max-width: 767px){
    .phone-device{

    }
}

但这又不是正确的事情......