25

I have not been able to find a definitive definition of what initial-scale=1.0 and initial-scale=2.0 means.

What do they both mean?

I know initial-scale has to do with the zoom, I just don't know what it's values from 1-10 mean.

Source: https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport

Robert
  • 10,126
  • 19
  • 78
  • 130
  • Possible duplicate of [What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?](http://stackoverflow.com/questions/22777734/what-is-initial-scale-user-scalable-minimum-scale-maximum-scale-attribute-in) – Andrew Li Aug 31 '16 at 00:41
  • `initial-scale=1.0` does not have any zoom, it's the default value I believe – Andrew Li Aug 31 '16 at 00:42

2 Answers2

22

A usual mobile responsive site would contain a HTML meta tag in the head like the following:

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

Within the tag the width property controls the size of the viewport. It can be set either to a precise number of pixels like width=400 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. device-width is the most commonly used width for responsive websites that scale across different screen sizes.

When the page is first loaded the initial-scale property controls the initial zoom level ie 1 Viewport pixel = 1 CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how the user is able to zoom the page in or out.

You could setup an example html page and include the viewport tag and change the initial-scale attribute to see the difference. Also try viewing the page on different viewport sizes and orientation.

initial-scale: The initial zoom when visiting the page. 1.0 does not zoom.

To answer what initial-scale=2.0 means here is an example of using 2.0:

enter image description here

In addition to the above, you may want to specify the initial zoom factor for the viewing area. If you want to set the viewport of your page to be equal to the device’s width and have it zoom in by default with a factor of 2 for example, this property will come in handy. The code for that would look as follows:.

The Image above shows what this would look like — although it is not a particularly practical demonstration of the possibilities the initial scale setting has to offer, the underlying point should be clear: content is blown up with a factor of 2 upon first load.

https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/#initial-scale

Some good references to checkout: https://css-tricks.com/snippets/html/responsive-meta-tag/ https://css-tricks.com/probably-use-initial-scale1/

Community
  • 1
  • 1
JamesG
  • 534
  • 4
  • 6
  • 1
    So what does the initial-scale=2 mean? – Robert Aug 31 '16 at 01:06
  • 1
    @RobertRocha Logic would suggest that it's 2 times as large as 1.0 – SeinopSys Aug 31 '16 at 01:29
  • 1
    @RobertRocha I've updated my Answer with some references to 2.0 – JamesG Aug 31 '16 at 01:54
  • @JamesG thanks a lot for your help. The image helped out he most. Still trying to get my head around the, "Viewport pixel = 1 CSS pixel." But I will leave that for later. – Robert Aug 31 '16 at 02:08
  • 2
    I think this begs the question: What is the DEFAULT value of "initial-scale"? If I omit this meta-tag what will its value be? A reasonable default value would seem to be 1, but apparently that is not the case because we need to specify that in the meta-tag. – Panu Logic Aug 05 '21 at 16:31
  • By "zoom" do you mean the effect I can make by pressing Ctrl + "+" and Ctrl + "-" in the browser? I've tried different values for initial-scale, tried resizing the window to get different viewport sizes on a desktop Firefox and Chrome, but nothing seemed to change. What does initial-scale do? I'm still confused. – user1768761 Mar 05 '23 at 12:46
6

I looked through an old book and found the answer as to what the values mean. I have not been able to verify it using a more official resource such as W3C.

The possible range of values for initial-scale are between 10% - 1000% or 0.1 - 10.0.

0.1 = 10% zoom

0.2 = 20% zoom

...

1.0 = 100%

2.0 = 200%

...

10.0 = 1000%

I have yet to test these out on actual devices.

Robert
  • 10,126
  • 19
  • 78
  • 130
  • 1
    Two testers you may find useful: [**here**](http://www.quirksmode.org/mobile/metaviewport/initialscale/1-none.html) and [**here**](http://snugug.github.io/viewport-test/is.html). – Michael Benjamin Aug 31 '16 at 02:06