CSS @media指令不適用於手機瀏覽器

我想隱藏某些小設備（如手機）的表中的某些列，以製作響應式頁面。它可以在Chrome和Firefox的桌面上正常工作，但只要我嘗試在我的Android移動設備上使用下面的簡單示例（使用Chrome），即使我的屏幕比800小得多，也會顯示所有列。我看不到任何內容顯然爲什麼它不工作。任何指針？CSS @media指令不適用於手機瀏覽器

<html> 
<head> 
<style> 
@media(max-width: 800px) { 
    th.nomobile, td.nomobile{ 
     display:none; 
     width:0; 
     height:0; 
     opacity:0; 
     visibility: collapse; 
    } 
} 
</style> 
</head> 

<body> 
<table cellpadding="7" cellspacing="1" class="border" width="100%"> 
<tr> 
    <th><strong>Col1</strong></th> 
    <th class="nomobile" style="width: 75px;"><strong>Col2</strong></th> 
    <th class="nomobile" style="width: 75px;"><strong>Col3</strong></th> 
    <th style="width: 225px;"><strong>Col4</strong></th> 
</tr> 
</table> 
</body> 
</html>

來源

2014-08-28 Rob Sedgwick

你有什麼手機？ – Bioto 2014-08-28 20:45:56

我有一個機器人g – 2014-08-28 20:48:23

在我的銀河3上通過我的時事通訊發揮它的大小它仍然顯示爲經常 – 2014-08-28 20:49:02

你可能會丟失在HTML的標題中的viewport meta標籤，從一個簡單的viewport meta標籤像下面和定製根據您的需求：

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

在這裏找到更多的信息：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

來源

2014-08-28 20:55:28 Arbel

如果不包括視meta標籤：

<meta name="viewport" content="width=device-width">

您的媒體查詢將會看到屏幕的實際像素（720x1280），而不是css /顯示像素（360x640）。在風景中，這會觸發或不觸發查詢。

來源

2014-08-28 21:43:10

CSS @media指令不適用於手機瀏覽器

回答

相關問題