CSS 个元素隐藏在 iPad

Question

我创建了两个 css classes（hidedesktop 和 hideonmobile），这样我就可以根据用户使用的是台式机还是移动设备有选择地隐藏元素。

但我注意到带有 class 的元素不会以纵向显示在 iPad 上，尽管在桌面、移动和横向上都可以正常工作。有没有人有关于如何克服这个问题的任何提示？

@media only screen and (min-width: 768px) {
.hidedesktop{ display: none; }
}

@media (max-width: 768px) {
.hideonmobile{ display: none; }
}

Answer 1

尝试

    @media screen and (min-width: 768px) {
       .hidedesktop{ display: none; }
       .hideonmobile{ display: block; }
    }

    @media screen and(max-width: 768px) {
       .hideonmobile{ display: none; }
       .hidedesktop{ display: block; }
    }

Answer 2

您的两个媒体查询都将隐藏 768 像素处的元素。 min-width 媒体查询影响的第一个值是 768px，max-width 媒体查询影响的最后一个值是 768px

将您的移动最大宽度设置为 767 像素，将桌面最小宽度设置为更大的值，即 992 像素，这样您的媒体查询就变成了

@media screen and (min-width: 992px) {
.hidedesktop{ display: none; }
}

@media screen and(max-width: 767px) {
.hideonmobile{ display: none; }
}

CSS 个元素隐藏在 iPad

CSS Elements hidden on iPad

css

hidden

ipad

ios