移動媒體查詢不啓用

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。