What is ViewPort in a Responsive website?

Posted on in Uncategorized

Graph-Paper_a3.inddViewPort is a meta element used in the head of the document in order to optimize pages for a wide range of devices. The ViewPort tag tells the browser how to control the dimensions and scaling of pages.

Mobile browsers render a page at a desktop width in an attempt to provide the best user experience. At the same time, the browser attempts to make the content readable by increasing the size of fonts and other content to fit the screen. On standard websites, this creates a lots of usability issues for the mobile user.

As a result, many website owners opt to use a responsive website. Responsive websites are designed to be usable on everything from desktop computers to smart phones. The ViewPort tag is an important element of responsive website design. The ViewPort value width=device-width tells the page to match the screen’s width in pixels that are independent of the device.

Here’s a sample of the ViewPort tag:

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

The ViewPort tag also has minimum-scale, maximum-scale and user-scalable attributes which can be set. However, you need to keep in mind that these may limit usability. You need to make sure that all of your content will fit within the ViewPort. If the content is larger than the ViewPort, users may need to zoom in and out and scroll horizontally. These actions can pose serious usability problems for your website. As a result, you need to be mindful of the ViewPort when designing a mobile website.

In order to make your responsive website usable you should avoid using large fixed width elements. Also, you should not rely on any particular ViewPort width when attempting to get your website to render well. Finally, remember to use CSS media queries to apply different styling for small and large screens.

Leave a Reply

What our clients are saying

I want to thank you for your help with our website development project. Your programming skills, attention to detail, and ability to interact directly with our client were excellent. You have provided tremendous value to my organization. With a project of this magnitude, including the use of web services to push data out to 19 sub-websites, your ability to overcome our unique challenges and coordinate with my IT team was exceptional. I appreciate your help, and I am certain that your expertise was key to the project's success. Thanks again, I look forward to working with you on our next endeavor!

~ John Forgione – Executive Vice President – SFA Marketing, Inc.

Read More