0

On mobile, most of my client's website looks like the regular desktop page. It hasn't been made responsive, but it's being worked on. Since the body width is fixed at 1000px, it's all tiny text and stuff in your mobile browser. So that will be a double tap party to actually read the content.

So what is my question? I'm building a little notification bar for mobile. It's a little yellow bar that slides in from the bottom of a webpage, telling the user that the page they're viewing isn't optimized for mobile yet. Apart from the fact whether you'd actually want this, I'm trying to figure out how to make the fonts inside of the bar to have a consistent physical size on all devices. Problem is that all devices these days have a wide range of DPI. Another question I found on StackOverflow deals with this, but only treats the desktop case. Mobile is a whole different ballgame.

I've been meddling with mm in CSS, but the inconsistency in textrendering between browsers is beyond massive. I guess I could do it by calculating font-size in px based on pixel density. Or by writing a bunch of media queries for all DPI variations. But that all seems stupid. Am I overlooking something here? Is there an easier way to do this?

Community
  • 1
  • 1
erik van nieuwburg
  • 301
  • 2
  • 3

1 Answers1

0

Use "em" as unit instead of mm or px. It adapts automatically to the font that the reader uses.

Example:

p {
font-size:1em;
}
Valentino
  • 1
  • 1
    Regrettably that won't work with the different way Chrome renders the page. That still upscales the paragraphs, messing up everything. Also the zoom factor screws it up. – erik van nieuwburg Apr 23 '13 at 11:09