Question

I need to know if the user on its mobile or Pad is viewing the website Verticaly or Horizontaly to switch my image scale.

Example:

If the user is viewing the page horizontally, the style of my image to see it full scale will be

img{width:100%; height:auto;}

but if it’s vertical the css will need to be switched to

img{width:auto; height:100%;}

So how can I achieve something like this in jQuery or Javascript or media query… etc so I can take the good style depending on which view the user is viewer the page on it’s mobile or iPad?

Thanks

Answer 1

You can detect orientation with some javascript like:

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 //Do Something In Portrait Mode
            }
            else if ( orientation == 90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == -90 ) {
                 //Do Something In Landscape Mode
            }
            else if ( orientation == 180 ) {
                 //Do Something In Landscape Mode
            }
        }
    }

nabbed from http://www.devinrolsen.com/javascript-mobile-orientation-detection/