Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the minimum value of "initial-scale" in meta viewport tag?

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=?
like image 756
user31782 Avatar asked Apr 03 '16 07:04

user31782


People also ask

What is the minimum width of viewport display?

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.)

Has a meta name viewport tag with width or initial scale?

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.

What is maximum-scale in viewport?

This viewport meta element allows users to scale content up to 200% because it has maximum-scale set to 2.0.

What is the viewport meta tag?

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.


1 Answers

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.

  1. Non-negative number values are translated to values, clamped to the range [0.1, 10]
  2. Negative number values are dropped
  3. yes is translated to 1
  4. device-width and device-height are translated to 10
  5. no 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.

like image 132
Asons Avatar answered Nov 03 '22 17:11

Asons