Webpage starts zoomed in on mobile devices

Question

I'm using this code on my webpage

<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

I would think the initial scale would make sure the webpage was zoomed out, but it doesn't. Any ideas?

I've tried this:

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

But, I need the width to be set to 1000px or it doesn't look correct.

Answer:

<meta name="viewport" content="width=1000; user-scalable=0;" />

Answer 1

initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000:

<meta name="viewport" content="width=1000">

Answer 2

Try this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

or

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

Answer 3

I also though that view port was the problem but after testing it I figured viewport was not the problem.

The problem in my case was the CSS: fixed width, or width: 100% instead of width: auto. So if you find that viewport is not the problem - CSS would likely be your next guess.

Hope that helps!

Answer 4

I tried playing with

<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

and it seems my site is indeed rendered 1000px wide at scale 1. However, since my phone's screen has no space for the site, the site continues outside the viewport resulting in the feeling that the site is zoomed in.

Setting this value makes the site 1000px wide zoomed out:

 <meta name="viewport" content="width=1000">

Is this your issue?

On a side note, 1000px sounds a bit wide for a mobile website, but I assume this website is not originally made for mobile devices?

Answer 5

I've had a similar problem. Try this:

<meta name="viewport" content="width=1000; initial-scale=1, maximum-scale=1, minimum-scale=1"/>

I think it has to do with the minimum-scale, but I'm not very sure.

Answer 6

You can use this.

    <meta name="viewport" content="width=100%">

Answer 7

Try out this will help you...This worked for me

 <meta name="viewport" initial-scale=1.0 content="width=100%">

Answer 8

In My Case I could successfully stop zooming of the screen by just adding the following code with no extras.

    <meta name="viewport" content="width=device-width">