0

I have created a mobile website version of my desktop website. Now, on my desktop website I seek to redirect to the mobile only if the width of the screen is less than 680px while using a mobile device.

CODE:

$(document).ready(function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

 var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
 if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
   deviceWidth = deviceWidth / window.devicePixelRatio;
 }
             if (deviceWidth < 680) {
                 window.location.href = "Mobile page URL";
             }
         } 
        )};

The code is working perfectly, but the problem is that when the user enters the page from a mobile device, it loads some of the html content for a split second, and only afterwards redirects to the mobile page. How can I make sure that he is redirected before loading any page content? Am I missing anything? Should I create a 3rd blank page that is responsible for redirecting?

Thanks in advance for any light on that matter.

Oranges
  • 193
  • 1
  • 2
  • 16
  • 1
    You need Server side logic to do so. If mobile User is detected Your server should load Mobile page. If you're using `php` it is easy. – Vedant Terkar Jul 01 '14 at 12:35
  • 3
    This is because `$(document).ready()` does not fire until the DOM is ready (i.e. all the the HTML is in place). You'll need to find a way to fire the script before that. Perhaps put the function up in the `head`? – Olly Hodgson Jul 01 '14 at 12:36
  • .NET Server side runs before loading any client side? – Oranges Jul 01 '14 at 12:36
  • @Oranges, I Don't know about `.net` but here is how to do it using `php`: https://code.google.com/p/php-mobile-detect/ – Vedant Terkar Jul 01 '14 at 12:38
  • Moved it up in the head, works perfectly. Thanks alot @OllyHodgson – Oranges Jul 01 '14 at 12:39
  • Just throwing this out there, it's not too hard with `Python` either. I'm running a TCPServer in Python (inheriting from `socketserver.BaseRequestHandler`) and using the `User-agent` header in the request from the client, you can differentiate between different browsers. – Noble Mushtak Jul 01 '14 at 12:42
  • Yes .Net code will process your server side logic before it renders the content. Are you using a MVC or a Web Forms project? In MVC you may be able to use an if(Request.Browser.IsMobileDevice) in the controller and then redirect them to the mobile version of the page. If you are using web forms it will be slightly different. – swestfall Jul 01 '14 at 12:44
  • As an aside, for something clientside, you could have your body tag css set to `display:none;` and then only change that value via JS when you have had a chance to ascertain the browser/width/userAgent etc. – Rob Schmuecker Jul 01 '14 at 12:56

1 Answers1

0

You can use your script in head but it's better if you check it on server and redirect to mobile page from server. To check on server refer : Request.Browser.IsMobileDevice = false for Android, why?

Community
  • 1
  • 1
mry
  • 314
  • 2
  • 11