Reputation: 2814
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
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
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