CODEWITHSUNDEEP
cssmedia-queriesscreen-orientation
Jack Hanna
Jack Hanna

Reputation: 167

@media Orientation Width

When specifying min-width and min-device-width media queries, is the width you declare based off the current width of the phone or the potrait width of the phone?

For example, an iphone4 has a width/height of 320x480 in standard/portrait orientation and has a device-width of 320. If the phone is held in landscape, is the device-width now 480 or is it still 320?

Upvotes: 1

Views: 70

Answers (2)

Sebastian Simon
Sebastian Simon

Reputation: 19485

It’s always the “current” width. You can easily check this by alerting window.innerWidth or something similar.

Example:

+---------+    +-----------------------+
|         |    |                       |
|         |    |       480 x 320       |
|   320   |    |                       |
|    x    |    |                       |
|   480   |    +-----------------------+
|         |                 Width: 480px
|         |
|         |
+---------+
Width: 320px

A rotation also fires a resize event.

But an important note: if you don’t have a viewport meta tag like one of these then another width is used (e. g. 980px) which stays the same for both orientations:

<meta name="viewport" content="initial-scale=1"/>
<meta name="viewport" content="initial-scale=1, user-scalable=no"/>

Only with one of these two meta tags the width adapts to the orientation.

Upvotes: 1

johnnyRose
johnnyRose

Reputation: 7490

The width that is used will be the current width of the viewport. If the orientation rotates, the current width will change to be the width of the rotated device (or, the height of the device in portrait mode).

You can specify the orientation, using orientation: landscape.

See here for more information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 1

Related Questions