Disable webpage if opened on a mobile device. (Android / iPad / Blackberry)

Question

I have web app with several pages, eventually it will be 100% mobile ready, but it's not right now.

When someone accesses it from a mobile device, I have a dialog which pops up to tell them it's not mobile ready yet.

       if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
             // some code..
             //alert(navigator.userAgent);

             .dialog();  
      } 

There is a lot of JS and HTML which executes when the page loads, I can stop the JS with an if statement, but the HTML still loads. The problem is all the HTML is broken and out of place behind the dialog. I'd rather not fill the entire screen with the dialog or just hide everything behind a big div. I would like to stop everything on the page except for the dialog.

Is there anyway to stop the HTML executing and is there a better way to stop the JS executing than with an if statement?

Answer 1

You cannot prevent loading of HTML or JS code to browser on client side, only on the server.

One option is to put all excess html and js in a separate file and load it through AJAX only if the mobile test failed.

For instance you can use jQuery.load() http://api.jquery.com/load/ Load data from the server and place the returned HTML into the matched element.