CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3responsive-design
TheCatWhisperer
TheCatWhisperer

Reputation: 981

bootstrap is not responsive for high-resolution phones

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!

Upvotes: 4

Views: 4006

Answers (1)

andreas
andreas

Reputation: 16936

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.

Upvotes: 9

Related Questions