如何仅在平板电脑上而不在手机或台式机上显示html内容？

Question

我在html中有一个div元素，其中包含一个视频教程，我只想在平板电脑上观看而不是在手机或台式机上观看时显示。 我该如何实现？

Answer 1

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

@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; 否则display: none;

所以对于您的代码

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

Answer 2

您可以使用CSS媒体查询来解决此问题。 平板电脑的标准尺寸为768像素至992像素。 因此，您可以编写两个媒体查询：一个查询小于平板电脑大小（移动设备），另一个查询大于平板电脑大小（台式机）。 然后将可见性设置为隐藏，不显示。 您想要为平板电脑尺寸编写的任何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 */
  }
}

Answer 3

假设您的div有一个名为“容器”的类。

@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;
  }
}

Answer 4

别担心。 使用以下我编写的自定义类！ 请注意，使用媒体查询（这些类会利用它们），您将失去对旧版本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-desktop”类。 为了让您入门...

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

媒体查询非常适合响应式设计。 只要确保不要过度操作并添加太多的断点即可。 如果您尝试说明所有问题，就会感到头痛。