CODEWITHSUNDEEP
cssresponsive-designmedia-queries
auto
auto

Reputation: 1153

Site is not responsive in mobile, but is responsive on resize

I am using css media queries to make a web page (currently not published) responsive. However, in Chrome Inspector mobile device mode, the site is not response. However, if I physically resize the browser window, it is responsive.

The media query begins like:

@media screen and (max-width: 767px) {}

Upvotes: 2

Views: 1821

Answers (1)

user241244
user241244

Reputation:

Put this in the <head> of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewport meta tag simplifies something that's pretty dicy, directing the browser to behave a certain way, instead of the browser trying to estimate what the right way to display a page is. Having CSS breakpoints, as you discovered, may not be enough--for some designs and browsers, it will be fine, but it's up to the browser.

width=device-width uses a custom value (device-width) that is what it sounds like--set the width of this viewport to how wide the device is. initial-scale means something like setting zoom to 100%. So, together: let the viewport be as wide as the device, and don't zoom in or out.

Upvotes: 7

Related Questions