While experimenting with the meta viewport
tag I noticed that any value less than 0.25 for initial-scale is treated as 0.25. E.g. all of the following
<meta name="viewport" content="width=device-width, initial-scale=0.25">
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<meta name="viewport" content="width=device-width, initial-scale=0.01">
<meta name="viewport" content="width=device-width, initial-scale= ">
render the page same. So,
- Is the minimum allowed vale of "initial-scale" in meta viewport tag 0.25?
- What is the default value of initial-scale?
- Why don't initial scale take it's default value, instead of taking 0.25, when blank space is given to initial scale as
initial-scale=
?
The minimum width of the layout viewport is about 1/10th of the ideal viewport, which is also the maximum zoom level. (I.e. the layout viewport never becomes smaller than the smallest possible visual viewport.)
Using the viewport meta tag lets you set the width and scaling of the viewport so that it's correctly sized on all devices, particularly mobile devices. Not using the viewport meta tag can make your website difficult to read, and also potentially add a significant delay on mobile browsers, impacting First Input Delay.
This viewport meta element allows users to scale content up to 200% because it has maximum-scale set to 2.0.
Viewport is a meta tag located in the <head> of the HTML. It's the visible part of a web page that a user can see from their device or monitor. Incorrect viewports will result in users having to side-scroll while browsing the website instead of the site fitting perfectly on their device screens.
The W3C states
The initial-scale, minimum-scale, and maximum-scale properties
The properties are translated into 'zoom', 'min-zoom', and 'max-zoom' respectively with the following translations of values.
- Non-negative number values are translated to values, clamped to the range [0.1, 10]
- Negative number values are dropped
yes
is translated to 1device-width
anddevice-height
are translated to 10no
and unknown values are translated to 0.1
Src: https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport
With the above given, the minimum should be 0.1, the default 0.1 and when no value is set, the default is used.
So the browser you tested it on most likely use the default, but since it appears to not go lower than 0.25, as it doesn't in your test cases, one can't say if it does or does not use the default.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With