使用CSS顯示和隱藏元素在移動設備上不起作用

Question

我正在使用此頁面http://lifecrypter.io/，並且正在使用CSS根據設備屏幕分辨率隱藏和顯示元素。

代碼在這里：

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

    .one{display:block !important; }
    .two{display:none !important;}
    .three{display:none !important;}

}

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

    .one{display:none !important;}
    .two{display:block  !important;}
    .three{display:none !important;}

}

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

    .one{display:none !important;}
    .two{display:none !important;}
    .three{display:block !important;}

}

我使用Responsinator在現場進行了測試，顯然它運行良好，但是隨后我用手機進行了現場測試，並且：

隱藏和顯示元素屬性不起作用。 我用幾部手機測試過，結果是一樣的。

經過幾次測試，我發現：

[ http://lifecrypter.io/]在框架集標記內關閉網站

在移動設備上測試S3中的原始站點鏈接

現在，我可以看到hide和show屬性運行正常。

我試圖修改頁面的meta標簽，但是

之前顯示的meta標簽是我唯一可以修改的

有什么辦法可以解決這個問題？

---

Answer 1

嘗試添加視口元標記。

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

在這個問題上可能重復。 @media查詢在移動設備中不起作用。 在Chrome中可以正常工作 。 希望能幫助到你！