Webpage starts zoomed in on mobile devices

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;" />

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">

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" />

I also thought 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!

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">

The answer is already here in the website that we are using.

If you inspect element the StackOverflow and look for the meta viewport of it. You will see

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

So you are setting the width and height depends on which is the width, and height of the screen in CSS pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded. And lastly minimum-scale is an optional attribute for the viewport, and it defines the minimum zoom that website users are able to do.

None of the answers above worked for me and I managed to figure out the answer.

The initial meta tag was had an initial-scale of 1.

To load the website without zooming in you have to change the initial-scale from 1 to 0.

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

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?

You can use this.

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

if you are using your stylesheet.css with a bootstrap link, make sure is the updated one, often it gets updated and when it does make cause errors on the old versions.

my problem was becauseI added the body in the css with min-width. It works when I remove it

body
{
   padding: 0;
   margin:0;
   min-width: 800px;
   color: black;
}

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.

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

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