0

Most big development sites recommend using <meta name="viewport" content="width=device-width,initial-scale=1"/>

And, according to a Mozilla doc on meta viewport tag, initial-scale=1, where 1 is the default value which means even if you don't specify the value, browser will itself use the default value. So, do I really need to add this, 'initial-scale=1' in my meta viewport tag or it is unnecessary?

For my responsive site project, I am wanting to use this instead <meta name="viewport" content="width=device-width"/>

Is it right? Or do I must specify yet mention initial-scale=1 (default value) like most big coding information sites say? I am kinda confused.

I had to illogically use initial-scale=1 and I don't think I need to specify a default value unless I am changing it as a design's demand.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Gaurav Bohat
  • 1
  • From what I understand `initial-scale` is mainly for mobile devices which may not use the default value of 1.0, causing sites to look zoomed out on mobile. I assume this comes from mobile browsers trying to show pages similar to desktop, and assuming it wasn't made to be responsive so they zoom out to show a larger area. – bluecouch Nov 10 '22 at 06:15
  • Initial-scale is designed to control the zoom level when the page is first loaded, or the orientation is changed. In order to make sure that the content does not appear zoomed in/out, you need to ensure that the initial scale is set to 1.0. – Elixir0101 Nov 10 '22 at 07:09
  • 1
    Does this answer your question? [What is initial-scale=1.0?](https://stackoverflow.com/questions/39239024/what-is-initial-scale-1-0) – bitski Nov 10 '22 at 10:31

1 Answers1

2

Refer for more info: Initial-Scale

You're using initial-scale=1 to fight the tendency by mobile browsers to automatically zoom out when encountering web layouts, a tendency that dates back to the initial launch of the iPhone. Back then, very few websites were mobile-optimized, so mobile browsers accounted for this by zooming out automatically. This behavior continues today since not all web pages are mobile-friendly.

Elixir0101
  • 331
  • 1
  • 2
  • 15