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
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:
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/
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.
Related
This is a test page mentioned in Google web dev responsive design article for testing the viewport meta tag:
https://with-vp-meta.glitch.me/
There is a strange behavior observed when testing with chrome dev tools responsive devices in devices with very low width (at least below 320px)
If you keep on reducing the width, there comes a point where the html body width is not equal to the device pixel width anymore (though it should be equal as per the width=device-width value).
It looks like this:
As you can see, the body tag is selected in the Elements panel. The size of the selection is much less than the 81px device width as mentioned in the dev tools device header (81 x 711)
If you look at the dimensions in computed styles: the dimensions are mentioned as 81px width
This is a real issue, actually happening with my website (on not so smaller width), and this is just an example to recreate it easily.
I suspect this has something to do with the viewport meta tag and it's handling, but i am not able to pinpoint what the problem is. I have tried different combinations of width and initial-scale to recreate this scenario in other dimensions, but wasn't able to recreate a scenario where the rendered body width is less than the viewport width, but devtools inspect still shows the dimensions as correct, although the rendered dimensions do not match the pixel dimensions?
Is it mandatory for responsive design the use of the meta tag viewport?
<meta name="viewport" content="width=device-width,initial-scale=1">
I have done few test without and it works well on desktops browser and it adapts propertly to the size of the windows, even if I use viewports as width or height to define header and footer.
So is that meta tag only useful to mobile devices or that's either necessary?
Does viewport use a default width or height for mobile devices?
When the meta tag is not defined there is a virtual viewport default values defined. Non-mobile-optimized sites with these default vaules looks in general better on narrow screen devices.
On Safari iOS the default width is 980 pixels, and the others browsers width size are alike or a little less.
Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page.
For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
Explanation and default values for width and height with viewport on mobiles
Apple as the inventor of viewport says that the default viewport settings are:
The default width is 980 pixels. However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device.
Apple configuring viewport and default values
This is the common setting of viewport used in various mobile-optimized websites. The width property governs the size of the viewport. It is possible to set it to a specific value (“width=600”) in terms of CSS pixels. Here it is set to a special value(“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time.
Note: The meta tag should be added in the head tag in HTML document.
A Responsive tags has the following attributed:
width: Width of the virtual viewport of the device.
height: Height of the virtual viewport of the device.
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out.(value= yes/no).
Ref: https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/
I see setting maximum-scale=1 in viewport meta will stop user to scaling zooming in&out. Then why we need user-scalable at all? And I also see a page with maximum-scale=1 and user-scalable=yes at the same time. What's the usage here? In my understanding, user will be not able to scale the whole page, but for the content, maybe a column chart, user can scale it. Is it right?
If the layout width, specified either explicitly with "width=" or implicitly by leaving out the width argument, is larger than the screen width of the device, the user can zoom out (and most browsers will load the page fully zoomed out). At this point, the scale will be less than 1 so setting just maximum-scale=1 means the user can zoom in until the scale reaches 1, just not any closer. The range of page scale in Safari/Chrome is [0.25,5].
You're right though that user-scalable is redundant, but you need to specify a minimum-scale equal to the maximum-scale in order to disable any scaling. e.g. <meta name="viewport" content="minimum-scale=1, maximum-scale=1">.
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!
Is there any HTTP header or HTML meta tag for telling the web client which height and width are the optimal ones for using with a given site?
I'm going on a limb here, but are you referring to the viewport meta tag?
<meta name="viewport" content="width=300px, initial-scale=1, maximum-scale=1">
Here is a link to the usage of it.
This part is what I find important and relates to your question on that same address.
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width value which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.