ajax.org uses an iPhone specific stylesheet for its mobile page, but should use the android stock browser stylesheet

RESOLVED INVALID

Status

Tech Evangelism
Mobile
RESOLVED INVALID
8 years ago
4 years ago

People

(Reporter: Kevin Brosnan, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

8 years ago
Created attachment 505820 [details]
Screenshot

Visit http://ace.ajax.org page is not zoomed to fit the screen and you cannot pan to the right to view the rest of the content.
(Reporter)

Updated

8 years ago
OS: Windows 7 → Android
Hardware: x86 → ARM
(Reporter)

Comment 1

8 years ago
HTC G2
Build ID: http://hg.mozilla.org/mozilla-central/rev/e0ea4e4d401f
build date: 2011-01-21
It looks like this page is actually cut off; you can't scroll any farther right than what's shown in the screenshot.

This page has an "iphone.css" stylesheet that is used on small-screens devices:

> <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="iphone.css">

This stylesheet sets "overflow: hidden" on the element that contains the main body content:

> #wrapper {
>     position:relative;
>     overflow:hidden;
> }

So it looks like this is a bug in the page, and not in Fennec.  We render the page at our default viewport width of 800px, which is not large enough to contain the page, and the page explicitly hides any content outside the viewport.
(Reporter)

Comment 3

8 years ago
Any way to check if the stock browser is getting this same css? It seems to handle this.
I don't know an easy way to view source in the stock browser.  I suspect their default viewport is simply larger than ours.

Fennec starts with a default viewport of 800px, and then enlarges it to 980px (same as the iPhone) if the content extends beyond 800px (bug 604765).  But the "overflow: hidden" in iphone.css ensures that the content will never extend past the viewport.

The page could fix this by adding something like "min-width: 980px;" to the #wrapper rule set, or by adding <meta name="viewport" content="width=980"> to the HTML.  Or by removing the "overflow: hidden" if it's not necessary.
This should be moved to
Assignee: nobody → english-us
Component: General → English US
Product: Fennec → Tech Evangelism
QA Contact: general → english-us
Summary: page not zoomed to width → ajax.org uses an iPhone specific stylesheet for its mobile page, but should use the android stock browser stylesheet
Version: Trunk → unspecified

Comment 6

4 years ago
On both ipod ios Safari and Firefox Android, I receive a kind of fluid desktop semi-responsive site.
The display is even better on Firefox Android than iOS.
The initial domain name doesn't exist anymore. Now the domain is http://ace.c9.io/

Resolved as Invalid
Assignee: english-us → nobody
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Component: English US → Mobile
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.