533832 - Mobile: Increase font-size for handheld devices on mobile desktop pages

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Alex Buchanan [:abuchanan]]

Viewing the desktop pages, e.g. /mobile/faq, from a handheld device, e.g. N900 + Firefox, is difficult, because the font is too small

Craig is working on using CSS to increase this font size for handheld devices only.

Primarily, we're concerned with pages linked to from the in-product pages, such as mobile/faq, mobile/credits, etc

Comment 1

[Craig Cook (:craigcook)]

Added the following to template.css:

/* Larger text for handheld devices */
@media handheld {
  #main-content, #main-feature { font-size: 130%; }
}

This *should* bump up the font size on those elements (they form the main copy block on most pages) sitewide for user-agents that both identify as handheld and support @media rules in CSS. I don't have the equipment to verify this works or addresses this bug, so it's a bit of blind finger-crossing until it's tested.

Is there a list of the pages we're most concerned about? It may be necessary to add more rules or target more elements.

Comment 2

[Alex Buchanan [:abuchanan]]

so far, the only affected pages I know of are, 
* mobile/faq, 
* mobile/credits,
* mobile/1.0/releasenotes (maybe)
* legal/privacy/firefox/mobile

But really, any mozilla.com page meant for the desktop could have small font.  The ones linked from in-product pages are the most important ones.
 
Stephend or retornam, could you check these on a device?

Sorry, I don't have a device yet, so my hands are tied as well.

Thanks!

Comment 3

[Stephen Donner [:stephend] Not actively reading bugmail]

Sure; testing now.

Comment 4

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #3)
> Sure; testing now.

Vishal, Raymond: think you'll be able to help test this in my absence?  I never finished it (my N810 kept hanging).  Now that we have the N900, it should be easy to verify; thanks!

Comment 5

[Alex Buchanan [:abuchanan]]

Did anyone get a chance to test this?

Comment 6

[Alex Buchanan [:abuchanan]]

hai?

Comment 7

[Ryan Doherty (:rdoherty)]

fyi I'm pretty sure Fennec ignores the handheld media type. CSS media query could be used here. http://starkravingfinkle.org/blog/2009/09/fennec-of-screens-and-orientation/

Comment 8

[Stephen Donner [:stephend] Not actively reading bugmail]

Reassigning to the default owner; Craig: can you take a look at comment 7?

Comment 9

[Austin King [:ozten]]

Here is overall page load and then a double tap to zoom in on first paragraph

http://www.flickr.com/photos/ozten/tags/n900/

Comment 10

[Austin King [:ozten]]

I've confirmed Fennec on n900 doesn't respond to @media handheld

@media handheld {
    .testdiv {
         background-color: red;
    }
}

No dice.

Comment 11

[Austin King [:ozten]]

Using link tag with attribute media set to handheld, both Firefox 3.6 and Fennec on n900 will download the handheld.css, but not apply it to the page.

<link rel="stylesheet" type="text/css" href="http://example.com/css/handheld.css" media="handheld" />

Comment 12

[Austin King [:ozten]]

Also see Bug#542058

Comment 13

[Austin King [:ozten]]

Alex had a cool idea that works:

/* high-res screens */
@media all and (min-device-width: 801px) {
  .testdiv {
      background-color: green;
  }
}

/* low-res screens */
@media all and (max-device-width: 800px) {
  .testdiv {
      background-color: red;
  }

}

Fennec on n900 is 800px wide.

I don't know what will happen to this rule once Fennec does landscape / portrait change in the future.

Comment 14

[Austin King [:ozten]]

via http://starkravingfinkle.org/blog/2009/09/fennec-of-screens-and-orientation/

Comment 15

[Ryan Doherty (:rdoherty)]

(In reply to comment #13)
> Alex had a cool idea that works:
> 
> /* high-res screens */
> @media all and (min-device-width: 801px) {
>   .testdiv {
>       background-color: green;
>   }
> }
> 
> /* low-res screens */
> @media all and (max-device-width: 800px) {
>   .testdiv {
>       background-color: red;
>   }

Hey, that was my idea! :P

Comment 16

[Alex Buchanan [:abuchanan]]

(In reply to comment #15)
> Hey, that was my idea! :P

lol, yes, notice the same URL posted twice,

comment 14 and 7

thanks for your help ryan and ozten!

Comment 17

[Austin King [:ozten]]

Sorry, I have a user script that removes all bugzilla comments from rdoherty.

Comment 18

[Austin King [:ozten]]

(In reply to comment #7)
Good call! (Sorry I didn't really read this bug very closely).

Let me know if there is any other testing I can do.

Comment 19

[Ryan Doherty (:rdoherty)]

(In reply to comment #17)
> Sorry, I have a user script that removes all bugzilla comments from rdoherty.

Can I get a copy of it?

Comment 20

[Stephen Donner [:stephend] Not actively reading bugmail]

What are the next steps, here?

Comment 21

[Chris More [:cmore]]

Closing old Mozilla.org website bugs due to them not being relevant to the new Python-based Bedrock system. Re-open if this is a critical bug and should be resolved on the new system too.