0

When I display my app on a device, the fonts, icons and buttons are unusably small. This is especially true on a tablet.

How can I easily scale up all of of my UI components?

pinoyyid
  • 21,499
  • 14
  • 64
  • 115
  • Have you made sure to define all sizes in em instead of px? I have all sizes in my theme in em and I'm not having this issue. – zelexir Oct 25 '12 at 13:47
  • I've done no styling at all. All of the styles are the defaults. The issue I have applies to the size of buttons as well as text, so although I can go through all of the CSS and make each individual font larger, I'm guessing that there is a simpler answer to do with viewport scaling. – pinoyyid Oct 25 '12 at 14:26

1 Answers1

1

Make sure the following meta tag is included in your app html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

If you still feel that the buttons and text are to small (which the should be a personal preference) you could always try changing the css. Add a new rule like this:

body {
    font-size: 140% !important; //I believe 114% is default
}

Hope it helps.

zelexir
  • 784
  • 5
  • 16
  • Magically, changing the font-size in the body css also scaled the buttons. Oddly, it didn't scale the button text, but I can live with that. Thx for the answer. – pinoyyid Oct 26 '12 at 11:54
  • That is because the button size is probably styled with 'em' units but the text with px. Could be investigated using chrome for instance (right click button -> inspect element) – zelexir Oct 26 '12 at 12:05