0

Display an error page if website is accessed through mobile.

I have already tried 

@media only screen (max-device-width : 768px) {
    html,body { display: none; } 
}

and 

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    getElementById('body').style.display = 'none';
}
Error
  • 133
  • 2
  • 10

2 Answers2

0

Firstly, visit here to get the best way to check it's a mobile browser link.

Secondly, you should attent somethings.
- body is a tag name, not a id (if you set <body id="body"> then it's okay). getElementById get an element by their id not tag name.
- getElementById maybe browser will not understood, right way document.getElementById

So in "if check" get from above link, push this code into, it's works

document.querySelector('body').style.display = 'none';
// or
document.getElementsByTagName('body')[0].style.display = 'none';
ThangLe
  • 878
  • 1
  • 8
  • 15
  • I visited the link and tried the code given in it but I can still access the website if I turn on the desktop version on my mobile. – Error Apr 21 '20 at 08:21
0

Change max-width to 980px

@media only screen and (max-width: 980px) {  
html, body {
  display: none;
 }
}
Fareed Khan
  • 2,613
  • 1
  • 11
  • 19
  • Your code works but I can still access website if I turn on the desktop version in my mobile. – Error Apr 21 '20 at 08:12
  • @Error I have updated my answer, you just need to change that 768px to 980px, because Mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices). – Fareed Khan Apr 21 '20 at 08:55