显示手机和平板电脑的文字，但不显示台式机

Question

我在手机上运行，但桌面文本显示在平板电脑上。

@media all and (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .desktop {
    display: none !important;
  }
}

<h1 class="desktop">Desktop</h1>
<h1 class="mobile">Mobile</h1>

Answer 1

767px 实际上是数位板的最小宽度。

您可能正在 Ipad 上进行测试。设置为1024px是最安全的。

因为通常 tablets 是从 768 到 1024。

我建议：

#header nav li.mobile {
    display: none;
}

@media all and (max-width: 1023px) {
  #header nav li.mobile {
    display: inline-block;
  }
}

@media all and (max-width: 1023px) {
  #header nav li.desktop {
    display: none;
  }
}

显示手机和平板电脑的文字，但不显示台式机

Show text for phones and tablets but not desktops

html

css

mobile-website