I have a mobile website but it loads zoomed out. How can I fix this?

Question

I have a mobile website but it loads zoomed out. How can I fix this.

Answer 1

You should insert the Viewport meta tag.

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

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Reference: Css-Tricks - Responsive Meta Tag - MDN - Using the viewport meta tag to control layout on mobile browsers

Answer 2

You might need to set the viewport

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

http://davidbcalhoun.com/2010/viewport-metatag/