Html @媒体屏幕CSS规则在智能手机上不起作用

我试图只在智能手机设备上隐藏主页的特定部分

我正在使用下面的代码，但它仍然显示在我的手机上。有什么建议吗

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

        #statistics .row {
            visibility: hidden;
            display: flex;
            justify-content: center;
        }

        #statistics .row .columns {
            visibility: hidden;
            width: auto;
            margin-top: 3em;
            background: #fff;
            color: #444;
            text-align: center;
            font-size: 85%; 
        }

        #statistics .timer.count-title.count-number {
            visibility: hidden;
            color: #c22362;
            font-size: 35px;
            margin-bottom: 8%
        }

        #statistics .fa {
            visibility: hidden;
            color: #c22362;
        }
   }

---

根据个人经验，使用

可见性：隐藏不是一个好主意。与其指定，不如改为：
display:none

可见性：隐藏；只需隐藏内容，如果在移动设备上查看，会在网站上留下空白-使用display:none；但是，不会显示首选的特定类或id周期，并且不会留下任何间隙

另外，请确保清除缓存-这也可能是您没有看到任何更改生效的原因。
您的代码很好（尽管我同意下面的答案，您应该使用
display:none；
），但您的手机的宽度可能大于640px。通常768px用于移动断点。