Search code examples
sencha-touch-2sencha-touch-theming

How do I 'scale' the UI to a readable size

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?

Solution

  • 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.