js device and orientation detection

Question

I have written this script based on other scripts i have read about, and take into consideration i'm a novice to js / jquery.

I want to detect the size and orientation of the device on page load and on orientation change.

So that i can apply different rules on each situation.

It works great on android devices, but i found it didnt work in portrait mode on ipad's Now i cant figure out what i did wrong. Even on js lint i get that all my scripting is not set and so on. a bit of help would be nice. This is the code i have written.

This code is only triggered if it detects your on a mobile device using php

$(document).ready(function(){


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

if ( $(window).width() < 768) {
if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+' - '+height+orientation);
}
if ( $(window).width() > 768) {
if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Tablet '+width+'-'+height+orientation);
}

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

alert (width+' - '+height);

if ( $(window).width() < 768) {
    if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+'-'+height+orientation);
}
if ( $(window).width() > 768) {
    if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
    alert ('Tablet '+width+'-'+height+orientation);
}
});
});

Media queries would be a good idea as @Camhänget pointed out. If you are using jQuery Mobile, you could also try `$(document).pageCreate(function(){})` instead of `.ready`. — Jeff Hines, Sep 28 '12 at 16:21
because i'm not applying different css stylesheets that is done separately already. This script is to be triggered to apply different scripts as it has to react differently depending on the size and orientation of the device. — SmileyWar, Sep 28 '12 at 16:22
@Jeff ah, ill look into .pageCreate havent seen that function yet. — SmileyWar, Sep 28 '12 at 16:23
Does this one help: [detect change in orientation using javascript](http://stackoverflow.com/a/5499030/295783) — mplungjan, Sep 28 '12 at 16:31
Hello mplungjan i did indeed, that was one of my first ones i tried, the problem with detecting with degrees is that it works correct on iOs but it will not work on Android, as androids will result in a differently. So if it's landscape it will think it's portrait on Androids. That's why i have come up with my version of the script, only that for some reason portrait detection is not working on iOs. — SmileyWar, Sep 28 '12 at 21:47

score 0 · Accepted Answer · answered Oct 01 '12 at 09:45

I have found my problem and that is that the if more then rule had to be 1 px less then the actual size to be able to be detected for iPad's.

Here is the code if anybody is interested. Just ignore the alerts as i added them to test all orientations and refreshes.

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

if ( $(window).width() < 768) {
if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+' - '+height+orientation);
}
if ( $(window).width() > 767) {
if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Tablet '+width+'-'+height+orientation);
}

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

if ( $(window).width() < 768) {
    if(width>height) {
    // Smartphone Landscape Rules
    var orientation = ' Landscape';
}else{
    // Smartphone Portrait Rules
    var orientation = ' Portrait';
    }
alert ('Smartphone '+width+'-'+height+orientation);
}
if ( $(window).width() > 767) {
    if(width>height) {
    // Tablet Landscape Rules
    var orientation = ' Landscape';
}else{
    // Tablet Portrait Rules
    var orientation = ' Portrait';
    }
    alert ('Tablet '+width+'-'+height+orientation);
}
});

FYI - You're not doing anything different in any of your device sizes cases. If width > height you are in Landscape, otherwise portrait. That's it. — Wallace Breza, May 28 '15 at 23:18
It's not that the width or height needs to be a pixel less, you should change your comparisons. Use `<=` or `>=` instead of `<` or `>`. — evolutionxbox, Aug 10 '15 at 11:31

score 0 · Answer 2 · edited Aug 10 '15 at 11:06

As I found the window.orientation value is different depending on device (tablet/phone) on Android. I used the following code for the screen mode definition on Android:

function isPortraitMode(){ 
   var screenWidth = Math.max(window.innerWidth, window.innerHeight);
   if (typeof window._myScreenWidth === 'undefined' // called at the first time (during the load) and the keyboard is not shown (won't take some height) 
        || window._myScreenWidth < screenWidth){  // sometimes window appears with animation and smaller size can be gathered during the animation at first time
        window._myScreenWidth = screenWidth;
   }
   return (window.innerWidth < window._myScreenWidth);
}

It is expected that the keyboard is hidden during the first call because the keyboard changes the window.innerHeight. isPortraitMode() is called on first load.

The function is also called during the orientation change and resize events.

js device and orientation detection

2 Answers2

Linked