0

I have a CRM (custom php website) and when the viewpoint is changed to that of a mobile, I want to add an overlay div which disables the user from using it (e.g. "Sorry, this crm is only available on iPads or Desktops").

How could I do this? Yes I know its 2018 and websites should be mobile first but a client has specifically asked for this.

dippas
  • 58,591
  • 15
  • 114
  • 126
Nadine
  • 777
  • 1
  • 11
  • 24
  • What attempts have you made? Where's your code? What went wrong? While I can't - and won't - criticise you for following the client's request I'd certainly advise that you make it clear s/he's requesting something that's potentially harmful to her/his business. Anyway, one - of many - potential duplicates on the site: https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used – David Thomas Feb 11 '18 at 16:15

2 Answers2

2

your question is too broad in terms of there is no code, but the logic is simple:

you have an (pseudo)element that is hidden in tablet and up showing only in mobile, something like this

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
  }
}
<div>show only in mobile</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
1

You can achieve it with fixed div overlay.

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

You can style and customize the content of this block however you want. This is just a basic idea.

Vitalii Chmovzh
  • 2,825
  • 4
  • 14
  • 28