如果视口是移动的，如何显示叠加层？答案

【问题标题】：How can I display an overlay if viewport is mobile?如果视口是移动的，如何显示叠加层？
【发布时间】：2018-07-21 20:36:00
【问题描述】：

我有一个 CRM（自定义 php 网站），当视点更改为移动设备时，我想添加一个覆盖 div 以禁止用户使用它（例如“抱歉，此 crm 仅在 iPad 上可用或台式机”）。

我怎么能这样做？是的，我知道它的 2018 年和网站应该首先是移动的，但客户特别要求这样做。

【问题讨论】：

你做了哪些尝试？你的代码在哪里？什么地方出了错？虽然我不能 - 也不会 - 批评您遵循客户的要求，但我当然建议您明确表示她/他要求的东西可能对她/他的业务有害。无论如何，网站上的许多潜在重复项之一：stackoverflow.com/questions/14942081/…

标签： html css media-queries

【解决方案1】：

您可以通过固定的 div 叠加来实现。

HTML

<body>
...
<div class="mobile-blocker">Sorry, this crm is only available on iPads or Desktops</div>
</body>

CSS

.mobile-blocker {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 100001;
   background: #000;
   color: #fff;
   text-align: center;
   display: none;
}

@media all and (max-width: 1023px) {
   .mobile-blocker {
       display: block;
   }
}

您可以随意设置和自定义此块的内容。这只是一个基本的想法。

【讨论】：

这是移动优先方法
好的，将媒体更改为不同的媒体并不是什么大问题。这只是一个一般性的想法.. 为什么要投反对票？
阅读 OP 问题 - Yes I know its 2018 and websites should be mobile first but a client has specifically asked for this
我没有提议先做移动端:) 好的。我已经编辑了我的答案。

【解决方案2】：

你的问题太笼统了，没有代码，但逻辑很简单：

您有一个（伪）元素隐藏在平板电脑中，仅在移动设备中显示，类似这样

body {margin: 0}
div {
  display: none
}

@media (max-width:800px) {
  div {
    display: block;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    pointer-events: none;
    z-index: 10000;
    position: fixed;
    overflow: hidden;
    color: white
  }
}

&lt;div&gt;show only in mobile&lt;/div&gt;

【讨论】：