移动媒体查询不启用

Question

Hei 我有一个mvc页面，有一些用于ipad和移动的css。

查询ipad（@media只有屏幕和（最小设备宽度：768px）和（最大设备宽度：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.

Answer 1

我已经结束了将移动部分放入单独的文件，并在链接标记查询，这工作。

<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"> 

Answer 2

试试这个：

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

我知道max-device-width用于针对移动设备，如iPhone和Android。但有时它不能正确识别。所以最好不要使用max-width。