How many times it has happened that a website looks perfect on landscape but gets screwed up in portrait, this happens since some tablets return static width, that is they will continue to return the same width in both landscape and portrait orientation, while some tablets return the width according to their orientation. I will explain this with a real example, iPad (all three) will return 768px as their width in both landscape and portrait orientation, although it should return 1024px in landscape mode, now what happens is, the website works well in landscape mode, however, in portrait orientation, the screen’s viewport becomes much smaller and the most irking part is, the same default list of styles will continue to be applied to it (because of it returning the same width), and as a result the whole website becomes a clutter, while **PlayBook **returns 1024px as width in landscape orientation and 600px in portrait orientation, so as soon as you tilt it, you can see the phone specific media query gets applied, to fix this, we can rewrite our phone specific media query like below, what it does is checks iPad’s orientation and applies the same specific styles as those of smartphones if the iPad is in portrait orientation.
@media handheld,
only screen and (max-width: 767px),
screen and (orientation: portrait) {
/* ! All phone and tablets(in portrait orientation) specific CSS goes here */
}