Simplify Your Responsive CSS with Orientation

Posted on Posted in Design & Development Tips

Make your responsive css easier by using orientation. They way I see it, anything ‘portrait’ is a mobile device or at least, not a laptop or desktop, since those devices don’t get turned on their sides for viewing. So basically, orientation:portrait in your media query handles everything up to a tablet viewed in portrait. One of the scenarios I have run into is having crossover. An iPhone X in isĀ 2436 x 1125. Those dimensions can overlap even desktops. Retina display makes it even harder to differentiate between phone and tablet and desktop as a small looking device can have a large resolution (as in the iPhone X).

I don’t want to have too many media queries and I try to make the sites so that I have a minimum of css to tweak. To apply css to all phones in portrait I use….

@media only screen and (orientation: portrait){

}

There is also one for landscape…

@media only screen and (orientation: landscape){

}

And you can combine where needed…

@media only screen and (orientation: portrait){

}

For iPad 2 and below…

@media only screen and (min-device-width:1024px) and (orientation: landscape){

}

 

I find some of the combinations much easier than creating ranges or using px like this…

@media only screen and (max-width: 319px) {

}

Plus with orientation:portrait you don’t have to update your code as much as it applies to all devices in portrait regardless of width or retina vs not. Good luck with it. : )