This question is a bit dumb but, for a long time I was confused about this. When we use max-width in the media query, does it apply to the current width, or does it apply to the longest possible width.
For example, we know that IPhone 4 is 320 x 480, if I want my query to apply only to the vertical view, then should I use max-width: 320 or should I use max-width: 480
That will depend upon whether the browser is in portrait mode or landscape mode. This can also be locked, based upon the answers to a previous question: How do I lock the orientation to portrait mode in a iPhone Web Application?
The width refers to the width of the current orientation.
In portrait view the width is smaller than the height. In landscape the height is smaller than the width.
When you goal is to have a layout for portrait mode then you should focus on that and not the width.
@media all and (orientation: portrait) { ... }
