Detect which view is active on mobile

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

score 2 · Accepted Answer · answered Sep 17 '12 at 16:02

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/

Seems to work great on iPad, iPhone but on Android... it does some nasty things :( — Warface, Sep 17 '12 at 16:10
@Warface it should be cross-platform, check out http://davidbcalhoun.com/2010/dealing-with-device-orientation for the most complete info on the subject, including fallbacks! — JKirchartz, Sep 17 '12 at 16:11

score 0 · Answer 2 · answered Sep 17 '12 at 16:42

0

Can´t you just use responsive css with certain breakpoints?

Kind of like this:

@media screen and (max-width: 123px /* your value */ ) {
  img{width:auto; height:100%;}
}

answered Sep 17 '12 at 16:42

Rockbot

935
1
6
24

Detect which view is active on mobile

2 Answers2