Closed Bug 618016 Opened 9 years ago Closed 9 years ago

Make a new media query for device orientation

Categories

(Core :: Layout, defect)

defect
Not set

Tracking

()

RESOLVED FIXED

People

(Reporter: stechz, Assigned: mfinkle)

References

Details

Attachments

(1 file)

The CSS spec defines orientation as strictly a function of width and height. For Fennec when the virtual keyboard is up, the window will be resized such that the media query now defines the screen as "landscape."

See http://developer.android.com/resources/articles/on-screen-inputs.html for more information on Android devices.

This doesn't affect Fennec content as of now, but it does affect our chrome. We need a new query that considers the *device's* orientation if available and defaults to using width and height.
Component: General → Layout
Product: Fennec → Core
QA Contact: general → layout
(In reply to comment #0)
> The CSS spec defines orientation as strictly a function of width and height.
> For Fennec when the virtual keyboard is up, the window will be resized such
> that the media query now defines the screen as "landscape."

I left an important part out--when the virtual keyboard is up in portrait mode, the media query defines the screen as landscape.
Blocks: 618019
Blocks: 618023
While you can mostly do this with device-aspect-ratio, that'll be painful for the exactly-square case since both (min-device-aspect-ratio: 1/1) and (max-device-aspect-ratio: 1/1) will match.

Adding -moz-device-orientation seems like a fine idea, and would also be more readable since you won't have to remember which way is 4/3 and which is 3/4.
Attached patch patch + testsSplinter Review
This patch adds a "-moz-device-orientation" CSS media query which uses the device size, not the window size, to determine the portrait / landscape state. It should otherwise act exactly like "orientation".

Also has some tests that pass on try
Assignee: nobody → mark.finkle
Attachment #496915 - Flags: review?(dbaron)
Comment on attachment 496915 [details] [diff] [review]
patch + tests

r=dbaron
Attachment #496915 - Flags: review?(dbaron) → review+
Comment on attachment 496915 [details] [diff] [review]
patch + tests

We need this for better Fennec orientation support on tablets
Attachment #496915 - Flags: approval2.0?
Attachment #496915 - Flags: approval2.0? → approval2.0+
pushed:
http://hg.mozilla.org/mozilla-central/rev/29f85e130850
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.