Geek Answers Handbook

Twitter bootstrap viewport

I inherited a set of website templates based on Twitter Bootstrap. The following meta tag appears in the <head> :

 <meta name="viewport" content="width=device-width">

But according to the docs, it should be:

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

Can someone explain what the difference is between the two?

+4
source share
1 answer

These are just different properties, you can add one or more. On the Mozilla website:

The width property controls the size of the viewport. It can be set to a specific number of pixels, for example width = 600, or to a device-specific width value, which is the width of the screen in CSS pixels at a scale of 100%.

And the second controls the magnification when displaying the page:

The initial scale property controls the zoom level at the first page load.

In addition, you can also use the maximum zoom , minimum zoom, and custom scalable properties to further control how users zoom in on the page.

This is necessary because mobile devices have very different pixel densities, therefore, by specifying properties such as this page, they will be displayed with almost the same physical size in iPhone, Galaxies, Nokias, etc., regardless of screen density.

Read more here (Mozilla page)

+7
source

More articles:


All Articles