Question

I made an app and testing it on an Android phone. But the controls look noticeably bigger on the phone (pixel wise) than in the browser window of the same size (480×800).
I tried including the into the index.html file with width set to device-width and 480, but UI controls on device still look too big and go past the screen edge.
I wonder what’s Sencha’s solution to this? Should we set meta viewport ourselves, edit some config option, etc.?

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />

Yes, that is what I have used.

Also make sure you have

<meta charset="UTF-8">

or

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">