Changing CSS for portrait screens (for example, iPad)

Problem

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!

Thanks

Problem courtesy of: Matt27

Solution

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

Discussion

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.