Responsive design - Iphone portrait vs landscape

0
votes

If Iphone 5 (320x568) is in the portrait mode its width is 320px. When it is in the landscape mode is its width 320px and orientation is landscape, or its width is 568px and the orientation is landscape. I am talking about the width that CSS sees.

In other words, does this code work in landscape mode as well, so the site (wrapped by #container) occupies the whole screen in this case and not just the 320px?

@media (max-width: 568px) and (min-width:320) {
#container {
    max-width: 790px;
    width: 100%;
      }
1
htmlcssmobileresponsive-design

1 Answers

1
votes

you want this

Portrait is taller, landscape is wider.

@media all and (orientation:portrait) {
  /* Styles for Portrait screen */
}
@media all and (orientation:landscape) {
  /* Styles for Landscape screen */
}

http://www.hongkiat.com/blog/css-orientation-styles/

Short answer: For an iphone 5 with those dimensions, your code will always apply.

Explanation: Think of min-width as

The minimum width on which this CSS will apply (anything lower will not count)

likewise consider max-width as

The maximum width on which this CSS will apply (anything higher will not count)

Note that you are applying a width:100% in a range between 320px and 568px. This means that the line max-width: 790px; will never be executed since the highest value width:100% can return is 568px