Question

我一直在我正在设计的网站上使用display: none;。因此，当我在移动设备上加载页面以查看进度时，一切正常。我所做的是当css检测到移动设备的设备宽度时，它会激活元素的display: none;。但有些事我不明白。

首次在智能手机上加载（谷歌浏览器）页面（纵向模式），该元素将被隐藏。当我旋转屏幕（横向模式）时，它仍然隐藏。但是当我再次旋转它（肖像模式）时，会出现应该隐藏的元素。任何人都可以解释一下吗？

设备：HTC One - Google Chrome浏览器

Answer 1

解决方案：将此代码添加到标题

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

不要使用@media（min-device-width）或（min-device-height），而只是使用（min-width）或（min-height）并从那里开始。在开发移动设备或平板电脑时需要花费很多头痛。