Javascript 如何仅在平板电脑上显示html内容，而不在手机或桌面上显示？

我在html中有一个div元素，其中包含一个视频教程，我只想在平板电脑上观看，而不是在手机或台式机上观看。我如何做到这一点

使用屏幕宽度的媒体查询：

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

在这里，您可以使用特定的屏幕宽度设置元素的css

display:block和其他<代码>显示：无

所以对于你的代码来说应该是

@media (min-width:320px) { display: none; }
@media (min-width:801px) { display: block; }
@media (min-width:1025px) { display: none; }

您可以使用CSS媒体查询来解决此问题。片剂的标准尺寸为768px至992px。因此，您可以编写两个媒体查询：一个用于小于平板电脑大小（手机），另一个用于大于平板电脑大小（台式机）。然后将“可见性”设置为“隐藏”，并将“显示”设置为“无”。任何你想为平板电脑大小编写的css都可以包含在你的标准css中

@media screen and (max-width: 768px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

@media screen and (min-width: 992px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

假设您的div有一个名为“container”的类

@media (min-width: 768px) and (max-width: 1024px){
  .container{
   display: block;
  }
}

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

@media (min-width: 1025px){
  .container{
   display: none;
  }
}

不用担心。使用以下我组合的自定义类！请注意，对于媒体查询（这些类使用），旧版本的Internet Explorer将失去一些浏览器支持…因此请使用Respond.js修复此问题

在样式表中，添加以下内容：

//medium+ screen sizes
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}

//small screen sizes
@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }

    .desktop-only {
        display:none !important;
    }
}

这将为您提供两个类-仅限移动设备和仅限桌面

顾名思义，如果您使用“仅移动”类分配某个内容，那么它将仅在屏幕尺寸很小（991px或以下）[智能手机，某些平板电脑]时显示，而“仅桌面”将仅在尺寸992px或更大时显示

这些值很容易更改，整个概念可以修改而不会出现问题。您甚至可以添加一个“仅限xl桌面”类。为了让你开始

//large resolutions only
@media (min-width: 1200px) {
...
}

媒体查询对于响应性设计非常有用。只是要确保不要做得太多，并添加太多的断点。如果你试图解释一切，你会让自己头疼。
欢迎来到Stackoverflow。请阅读：
@media（最大宽度：768px）{…}
注意，这些是iPad纵向方向的标准尺寸，横向方向位于
1024px
。有许多平板电脑设备具有不同的屏幕分辨率。您将需要各种媒体查询，以便始终保持响应性设计和布局，以适应这些设备。