如何使用媒體查詢定位平板電腦但不使用IE9

我發現IE9正在爲我的網站使用平板電腦樣式。如何使用媒體查詢定位平板電腦但不使用IE9

@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), 
     (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{ 
    /* tablet styles */ 
}

當瀏覽器的寬度爲1024px時，上述媒體查詢應用於IE9。

做了一些研究後，我發現了以下問題/解決方案，並提供瞭解釋爲什麼會發生這種情況。

Media query not working in IE9

從我可以告訴，它歸結爲IE9不解釋「分設備寬度」和「最大設備寬度」。

根據http://msdn.microsoft.com/library/ms530813.aspx確實不支持這些屬性，只有「min-width」和「max-width」。

另外，http://www.w3.org/TR/css3-mediaqueries/#error-handling 指出瀏覽器應該忽略無法識別的屬性。看起來不像IE9。

我還發現了這個問題：Common breakpoints for media queries on a responsive site但它沒有給我一個解決方案。

如何才能將我的樣式表應用於平板電腦而不是1024像素寬度的桌面瀏覽器（如IE9）？

來源

2013-03-15 Tom

您需要在您的文檔的<head>添加此meta標籤：

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

然後在你的CSS可以更換：

min-device-width與min-width
max-device-width與max-width。

來源

2013-03-15 13:36:24 tw16

@Tom：這個解決方案有幫助嗎？ – tw16 2013-03-19 14:28:30

是的確幫忙，我沒有意識到你可以做到這一點upvoted。但我仍然發現其他瀏覽器正在採用這種平板電腦風格。我提出的解決方案是https://github.com/barisaydinoglu/Detectizr來檢測平板電腦，然後手動加載樣式表。打算做一些進一步的研究 – Tom 2013-03-20 12:45:03

對不起，我誤解了這個問題。我沒有意識到你只希望將CSS應用於平板電腦，而不是使用與平板電腦尺寸相同的屏幕。出於興趣，您是否有任何理由專門針對平板電腦？平板電腦的風格不會像小電腦屏幕一樣有用嗎？ – tw16 2013-03-20 13:27:23

如何使用媒體查詢定位平板電腦但不使用IE9

回答

相關問題