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

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

回答2:

Try this:

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

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

回答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!

回答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?

回答5:

You can use this.

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

回答6:

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

回答7:

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.

回答8:

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

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

来源：https://stackoverflow.com/questions/14272420/webpage-starts-zoomed-in-on-mobile-devices

标签

html

viewport