CODEWITHSUNDEEP
htmltwitter-bootstrap
Dónal
Dónal

Reputation: 187339

twitter bootstrap viewport

I've inherited a set of templates for a site based on Twitter Bootstrap. In the <head> the following meta-tag appears:

<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 between these two is?

Upvotes: 4

Views: 9737

Answers (1)

alemangui
alemangui

Reputation: 3655

They are just different properties, you can add one or more. From Mozilla's site:

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

And the second one controls the zoom when the page is displayed:

The initial-scale property controls the zoom level when the page is first loaded.

Additionally, you can also use the maximum-scale, minimum-scale, and user-scalable properties to further control how users will zoom the page in or out.

This is necessary because mobile devices have very different pixel densities, so by specifying properties like these a page with will render at almost the same physical size in iPhones, Galaxies, Nokias, etc., regardless of screen density.

More info here (Mozilla page)

Upvotes: 7

Related Questions