Changing CSS for portrait screens (for example, iPad)


I've built a website, and I'm happy it's responsiveness. However, on an ipad in portrait mode there is a large amount of white space in the bottom half and I'm wondering if there is a method to detect portrait oriented screens and change the CSS accordingly.

If someone can point me in the right direction it would be hugely appreciated!


Problem courtesy of: Matt27


/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
Solution courtesy of: Mayank Sharma


Well you could just detect screen width and height. If the height is greater than widths, then it's portrait.

if (window.innerHeight > window.innerWidth) {
    //Portrait code here
Discussion courtesy of: tomca32

This recipe can be found in it's original form on Stack Over Flow.