StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem lies in the way that orientation is calculated:</p> <p><a href="http://www.w3.org/TR/css3-mediaqueries/#orientation" rel="noreferrer">http://www.w3.org/TR/css3-mediaqueries/#orientation</a></p> <blockquote> <p>The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.</p> </blockquote> <p>Since the height/width is calculated on the visible viewport, the soft keyboard apparently causes the orientation to flip now that the viewport width is less than the height. One solution would be just to use your media queries based on just <code>width</code> instead. This makes it more flexible across devices regardless of orientation, not to mention width/height is more widely supported than orientation.</p> <p>If you want to account for the width instead of orientation, I'll use the iPhone as an example:</p> <pre><code>@media screen and (max-width: 320px) { /* rules applying to portrait */ } @media screen and (max-width: 480px) { /* rules applying to landscape */ } </code></pre> <p>This approach is more flexible than orientation since the queries aren't limited to devices/user-agents that support orientation, not to mention that orientation <a href="http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html" rel="noreferrer">tells you very little</a> versus the width.</p> <p>Of course if you <em>really</em> need to know orientation, it seems like setting the class initially and just use that might be your best option.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload