html - 电话的媒体查询

Question

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

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

当我在台式计算机上将浏览器拖得很小时，它会切换到手机布局，有没有办法防止这种情况发生，所以只能在手机上看到小尺寸？

score 3 · Accepted Answer

真的没有必要这样做。这是响应的重点，它与设备无关。因此，如果用户在桌面上访问您的站点，但他们的浏览器真的很瘦，那么内容将适合它（例如 Windows 8 Metro IE10 侧边栏的东西）。您不想将其仅限制在手机上，一旦完成，您将走上一条不适合响应式行驶的道路。

score 0 · Accepted Answer

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

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

HTML：

<html class="phone-device">

</html>

CSS：

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

    }
}

但这又不是正确的做法……

2 回答 2