Closed Bug 845829 Opened 11 years ago Closed 6 years ago

B2G Desktop does not match correctly min-device-width mediaqueries

Categories

(Firefox OS Graveyard :: Hardware, defect)

Product:
Firefox OS Graveyard
Component:
Hardware
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: basiclines, Unassigned)

Details

If you use "min-device-width" mediaqueries (or the matchMedia via js) it matches the computer screen width instead the b2g app frame.

This causes inconsistencies between phone devices and computers.
The more patches we land on https://bugzilla.mozilla.org/show_bug.cgi?id=830644 the more visual problems will be in b2g desktop.


You can try on b2g desktop this application:
http://basiclines.github.com/screenhelper (firefoxOS app)

It gives you interesting information about your device screen.
Shouldn't you be using viewport-width media queries instead?
That matches the iframe or parent window width/height and what we need is to target via device-width/height.
I think even using another mediaquerie this one is buggy on B2G Desktop.

Thx!
(In reply to Ismael from comment #2)
> That matches the iframe or parent window width/height and what we need is to
> target via device-width/height.

Why? The size of the viewport represents how much space you have for your UI layout --- isn't that what you care about?
Gaia have some internal iframes in applications like dialer, system, etc...
We need to set a scale ratio based on device proportions instead on iframe space.
If not we will apply different scale ratios among Gaia :S

I think we should fix this issue even if we use viewport or device mediaqueries in our applications.
(In reply to Ismael from comment #4)
> Gaia have some internal iframes in applications like dialer, system, etc...
> We need to set a scale ratio based on device proportions instead on iframe
> space.
> If not we will apply different scale ratios among Gaia :S

Ah.

So the basic problem is your strategy of using media queries to test device dimensions and then set font-size to scale the UI where you've used rems. If you stuck to using CSS px, and scaling the UI using layout.css.devPixelsPerPx, like I wanted, you wouldn't have this problem.
I think I'll start a thread on dev.gaia...
Any update about this issue?
In https://groups.google.com/forum/?fromgroups=#!topic/mozilla.dev.gaia/BwCdYFLTKi0 we decided to use px and get rid responsive.css. Right?

Other users of device-width should probably be using viewport-width instead.
Firefox OS is not being worked on
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.