1

In another words: What is the purpose of viewport element in HTML 5?

Because using media queries appropriate CSS styles can be applied according to screen size of device. Why we need viewport element with this part "width=device-width".

I was going through this w3 schools tutorial (http://www.w3schools.com/css/css_rwd_viewport.asp).

It gives an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag. How this works?

The tutorial says the meta viewport element sets page width as width of device. How this work restrict the page from horizontally scrollable and scalling down ?

I thought the above effect is due to media query. Why viewport element's width attribute needed for responsive design ?

Siva Sankaran
  • 1,521
  • 4
  • 21
  • 40

2 Answers2

2

What is the purpose of viewport element in HTML 5?

By default mobile devices will assume they are loading a wide, desktop style web page and scale it down to fit your small screen.

You overide this behaviour by specifying the viewport meta tag 

<meta name="viewport" content="">

You specify the width your page is designed for with the content attribute. For example if it was a mobile only design you might have 

<meta name="viewport" content="width=320">

Responsive web design is based on a flexible layout, and so instead of specifying a set pixel width for the viewport you instruct the browser to match the page layout to the device 

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

I thought the above effect is due to media query.

Media queries are the second key part of mobile and responsive design.

The viewport meta tag is giving the browser instructions on the design width of the page, media queries let you style the page differently for different device widths. For example you might use media queries to style an <h1> element as 36px on desktop but 30px on tablet and 24px on smartphone

The tutorial says the meta viewport element sets page width as width of device. How this work restrict the page from horizontally scrollable ...

To clarify, setting the page width doesn't automatically stop horizontal scrolling. If you set the viewport meta to content="width=device-width" and you have an element with a fixed width of say 960px, it's not going to fit in the viewport of your smartphone and you'll have horizontal scrolling.

With responsive design it's still up to you to ensure that all the elements on the page will resize for different devices. You do this by giving them either a flexible width, or use media queries to set fixed widths for different screen sizes.

Good luck!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
1

Using the meta viewport value width=device-width instructs the page to match the screen’s width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Is it really necessary to use viewport tag?

Is the viewport meta tag really necessary?

Learn More about Viewport

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en

Community
  • 1
  • 1
YourFriend
  • 434
  • 4
  • 7