Closed Bug 1108903 Opened 10 years ago Closed 6 years ago

Font size renders wrong in Fennec http://www.satindex.de/update.php

Categories

(Firefox for Android Graveyard :: General, defect)

35 Branch
x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: guigs, Assigned: jillanih)

References

Details

Attachments

(1 file)

Description: http://www.satindex.de/update.php compared on desktop and mobile have different font sizes. 

There are two different font sizes 9pt and 10px. These may render differently(not in the example TD is not rendered in Desktop): 

td.ticker2 {
    padding: 2px 4px;
    font-size: 10px;
    color: #FFF;
    font-family: Verdana;
}
TD {
    font-size: 9pt;
    color: #000;
    font-family: Verdana;
}

Expected: CSS to render the same in desktop and mobile.
Mass change to move Firefox for Android::Readability bugs to block bug 1129033. Filter on readability-mass-move.
Blocks: 1129033
Component: Readability → General
CSS selectors are generally case-insensitive. So you need to use td instead of TD. 

td.ticker2 {
    padding: 2px 4px;
    font-size: 10px;
    color: #FFF;
    font-family: Verdana;
}
td {
    font-size: 9pt;
    color: #000;
    font-family: Verdana;
}

This will work for mobile and desktop.
Attached file patch.txt
Added the updated version of code.
Assignee: nobody → jillanih
Status: NEW → ASSIGNED
This appears to be caused by the "Font inflation" feature which increases the text size of certain elements to make them more readable on small screens.  This feature is disabled by default in the latest version of Firefox (bug 1127441).  You can enabled or disable it by changing Firefox: Settings: Accessibility: "Use system font size".
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
And if your web site *does* have a proper (responsive via CSS media queries, or whatever else) mobile layout, you can disable font inflation and mark your page as mobile-friendly by including <meta name="viewport" content="width=device-width"/> (applies to Chrome, too, by the way).
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: