-1

If anyone can help me understand the use of --

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

Just trying to check usage of this line, by removing this line from Web Page( written in Bootstrap) & then re-sizing my Laptop browser window. Then tried to changing the initial scale to 0.5,2,3,4 & width parameters to 500, 1500 etc. but no changes appear on my webpage. Please help me to understand this.

Ishaan
  • 75
  • 9
  • Possible duplicate of [test mobile website in desktop browser](https://stackoverflow.com/questions/12427736/test-mobile-website-in-desktop-browser) – JJJ Jul 06 '18 at 05:21

1 Answers1

0

They are viewport meta tags, and is most applicable on mobile browsers.

width=device-width

This means, we are telling to the browser “my website adapts to your device width”.

initial-scale

This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.

How to see the Impact:

If you just want to see the impact on your browser, just open a webpage like www.example.com , open the page in chrome and open developer tool/ inspect web page.

Select the device mode to mobile and change the value of initial-scale from 1 to 2 or any value, that will show you impact of initial-scale.

  • Awesome, its working in Mobile mode. But if it doesn't applies to Desktop & Browser Windows ? Why no effects on Desktop & Laptop Browser screen when changing initial scale & device-width. – Ishaan Jul 06 '18 at 05:58
  • meta name="viewport" layout type is specifically designed for mobile/handheld device and came in existence only to load desktop page on mobile device. And if you want to go more into depth, please look into below links. All the description talks only about mobile device. [link](https://www.w3.org/TR/css-device-adapt-1/) and [link](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) Note: If you like the answer, please give a thumbs up. –  Jul 06 '18 at 08:07
  • @Ishaan is the things clear? did you looked on the link shared for your reference. –  Jul 12 '18 at 07:26