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

【问题标题】：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)，不带最大设备宽度一次
最大宽度不起作用

标签： css mobile media-queries

【解决方案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">

【讨论】：