移动设备的媒体查询不起作用

Posted 2023-03-06

【中文标题】移动设备的媒体查询不起作用

【英文标题】：Media query for mobile doesn't wok

【发布时间】：2014-07-05 00:21:39

【问题描述】：

嘿嘿 我有一个 mvc 页面，其中包含一些适用于 ipad 和移动设备的 css。

ipad(@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) ) 的查询工作正常，但我无法让移动设备的查询正常工作。 我试过这个：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)  

还有这个：

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) 

还有这个：

@media only screen and (max-device-width : 767px)

我的元数据是这样的：

<meta name="viewport" content="width=device-width,initial-scale=1" />

在 HTC ONE 和 iphone 4 上测试。

【问题讨论】：

Don't include 'max device' make it so your queries look like this @media (max-width: 767px) EDIT: or min-device for that matter

尝试使用@media only screen and (max-width: 767px)，不带最大设备宽度一次

最大宽度不起作用

【参考方案1】：

试试这个：

@media only screen and (max-width: 767px)  

我知道max-device-width 用于定位移动设备，例如 iphone 和 android。但有时无法正确识别。所以最好在没有设备的情况下使用max-width。

【参考方案2】：

我最终将移动部分放入单独的文件中，并将查询放在链接标签中，这很有效。

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="Content/Site.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 767px)" href="Content/mobile.css">