js device and orientation detection

问题

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);
}
});
});

回答1:

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);
}
});

回答2:

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.

来源：https://stackoverflow.com/questions/12643538/js-device-and-orientation-detection

标签

javascript

jquery

mobile