Krishay R.
Krishay R.

Reputation: 2814

Website keeps reloading on mobile device - Javascript

on desktop, the site I made works perfectly, however on mobile, the page constantly refreshes not allowing the user to view any of the content. I was having difficulty making my site responsive, so I made a new file called mobile.html to show all of the content properly. When the screen is a certain size, the site redirects to the mobile.html. Here is the code I believe is producing the issue.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=1500px, maximum-scale=1.0" />
  <script type="text/javascript">
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
      document.location = "mobile.html";
    }
  </script>

How can I fix this issue?

Appreciate any help, Thanks

Upvotes: 0

Views: 975

Answers (2)

lll
lll

Reputation: 476

First of all check mobile.html and make sure you don't have your forwarding code.

Alternatively you can check current page is not mobile.html. You can use the code below this will put more control on your page. First check if userAgent is mobile and then check if current page is not mobile.html if both true this means user is connecting from a mobile device but not viewing mobile page so forward to mobile page.

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var mobilePage = 'mobile.html';

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) && filename !== mobilePage ) {
  document.location = mobilePage;
}

Upvotes: 1

Great_Anaphylaxis
Great_Anaphylaxis

Reputation: 26

Try this code...

<script type="text/javascript">
if (document.location == "example.com/mobile.html") {
    //do nothing
}

else if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
    document.location = "mobile.html";
}
</script>

Upvotes: 0

Related Questions