Menu
My site uses bootstrap 3 to accommodate devices of varying screen sizes. I use bootstrap's hidden-xs class to hide my page's unnecessary background image on small devices allowing them to focus on the important input components without having to zoom in. This works fine if you resize the browser window or adjust your monitors resolution. It also works great on low-res phones like the iPhone.
However, since bootstrap uses screen pixel size, this does not work on android phones with high resolutions. The result is, the phone user has to zoom in or work hard to select the appropriate inputs as they appear small on the phone's physically small screen.
Is there an easy fix for this so that users with high-res phones don't get the same look as the desktop users?
Thanks!
287
You can use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> section of your HTML document, to scale the document based on the screen width of the device you are using.
Check MDN for more information about the viewport meta tag and its usage.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
