隐藏的div不会隐藏在移动设备上

Question

我正在使用一些CSS隐藏屏幕外的div（然后使用jquery来设置它的动画）：

body {
    overflow: hidden;
}
.hide {
    position: absolute !important;
    left:100vw !important;
}

在桌面上，正确隐藏了div，并且没有显示任何滚动条，但在移动设备上，可以向右滚动并查看此div。

浏览器没有问题：Win10上的Chrope / Edge / Firefox（截至今天的所有最新版本） 浏览器有问题：Safari iOS（ios 9.x），Dolphin for android（最新）和firefox mobile（也是最新的）

请参阅此处的代码：https://jsfiddle.net/nfpwccvj/4/

有没有办法解决这个问题？

感谢。

Answer 1

你忘了关闭身体}？或者这个例子就是这个错误？

Answer 2

首先，left:100vw不支持跨浏览器，全宽度的最佳做法是width:100%。如果您想在移动设备上隐藏某些内容，则需要使用媒体查询。

.hide {
    display:block;
}
@media (max-width:480px) {
   .hide {
       display:none;
   }
}