Monday, 2 June 2014

Javascript get mobile screen width after orientation change

Ex1:
 $(window).bind( 'orientationchange', function(e){

            });
Ex2:
$(window).bind( 'orientationchange', function(e){
    var ori = window.orientation,
        width = (ori==90 || ori==-90) ? screen.height : screen.width;
    };
});
Ex3:
 function adapt_to_orientation() {
        var ori = window.orientation;
        var screenwidth = (ori==90 || ori==-90) ? screen.height : screen.width;
        var screenheight = (ori==90 || ori==-90) ? screen.width : screen.height;
          // resize meta viewport
          $('meta[name=viewport]').attr('content', 
          'initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,
           user-scalable=no,width='+screenwidth + ',
           height=' + screenheight);
           }   
        adapt_to_orientation();
        $(window).bind( 'orientationchange', adapt_to_orientation);
Ex4:
Check if device is in portrait mode
function isPortrait() {
    return window.innerHeight > window.innerWidth;
}
Check if device is in landscape mode
function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}
Usage
if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}





No comments:

Post a Comment