CODEWITHSUNDEEP
htmlcssviewport
bkoodaa
bkoodaa

Reputation: 5322

How to force mobile browsers to display entire web page without zooming in?

I have a non responsive web page that has centered content 700px width 700px height. I'm having trouble getting mobile devices to display the content (I'm testing with Chrome on Android, but I'm guessing the same issue occurs with other devices as well). I've tried various things with viewport meta and css media screen, but Chrome keeps zooming in on some portion of the page instead of displaying all of the content. This is surprising to me, because when I visit websites which are clearly not optimized for mobile devices, my usual experience is that I see the entire page "zoomed out" and I can then zoom in. I was expecting my page to also work like this, and no matter what I do, I can't get my page to work like that.

Additionally: bonus points if you know a way to "auto-zoom" so that the centered content is fully displayed without displaying empty space. Like a viewport meta tag that defines both minimum-width and minimum-height simultaneously.

Upvotes: 0

Views: 1071

Answers (1)

messismore
messismore

Reputation: 139

Did you set <meta name="viewport" content="width=device-width, initial-scale=1">?

More info on the viewport meta tag

Upvotes: 2

Related Questions