JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features.
Most mobile phones are running some version of WebKit (what Chrome runs on), so you’re pretty much guaranteed better support than IE8 provides if you’re developing for mobile.

Detecting Mobile Devices

Instead of using jQuery you can use simple JavaScript to detect it:

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

or you can combine them both to make it more accessible through jQuery.

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()))

now $.browser will return “device” for all above devices
Note: $.browser removed from jQuery 1.9.1
JQuery or JavaScript tricks for mobile devices

Using jQuery To Get Size of Viewport

To get the width and height of the view-port:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

Resize event of the page:

$(window).resize(function() {
  //code for condition - when window resize..

$(window).height() returning the full width of the document, not the portion that is zoomed to. If you want to know how much is visible after zoom is applied, then ” innerWidth / innerHeight ” is more correct to use (covering zooming). Using innerHeight you can get the height of the device that runs your web app.

Note : $(window).width() is not consistent across browsers if the scroll-bar is visible.
Use jQuery to get the width of the window.

if ($(window).width() < 960) {
   alert('Less than 960');
else {
   alert('More than 960');

Detect rotation of android phone in the browser

To detect an orientation change on an Android browser, attach a listener to the orientationchange or resize event on window:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Check the window.orientation property to figure out which way the device is oriented. With Android phones, screen.width or screen.height also updates as the device is rotated. (this is not the case with the iPhone).

That’s it!

Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!