The size of the text and the font choice greatly impact the visibility and readability of an application. Additionally, your application also has to still be usable at high zoom levels.
As an application developer, you should always consider the fact that the application could be zoomed to 200%, and everything should still be visible. For that reason, any style that involves disabling zooming or setting fixed weight or height should be avoided. Properties that affect the zooming have to be set accordingly.
user-scalable
initial-scale
maximum-scale
minimum-scale
width
height
target-densitydpi
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
zoom { zoom: 150%; }
#elementId { -ms-transform: scale(2,3); /* Internet Explorer 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); } html { -ms-content-zoom-limit-min: 1; -ms-content-zoom-limit-max: 1; } html { touch-action: none; }
Is each text element and each image enlarged to double width and double height?
Is the text still readable (no overlaps)?
Are text alternatives for non-text content magnified in the same way?
Is the full content and functionality still available?
Does the layout still look OK?