Question

我有一个CRM（自定义php网站），当视点更改为移动设备时，我想添加一个覆盖div，禁止用户使用它（例如“抱歉，这个crm仅适用于iPad或桌面“）。

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

Answer 1

你的问题太宽泛，没有代码，但逻辑很简单：

你有一个隐藏在平板电脑中的（伪）元素，只能在移动设备中显示，就像这样

＆＃13;

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

＆＃13;

<div>show only in mobile</div>

＆＃13;

Answer 2

您可以使用固定的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;
   }
}

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

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

2 个答案: