256 Kilobytes

Forum in Style and Layout | By Some Guy

Published | Last Update

443 views, 0 RAMs, and 1 comment

Profile Photo - Some GuySome GuyBasic Subscriber

I’m following a web design tutorial that suggested including the following code in the HTML head:

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

What does this code refer to and why is it necessary?
 

Download more RAM. 🐏 ⨉ 0Posted by Some Guy 3 years ago

Edit History

• [2018-12-29 0:10 PST] Some Guy (3 years ago)
🕓 Posted at 29 December, 2018 00:10 AM PST

This is a debug account.

Profile Photo - Louis J. V. CicaleseLouis J. V. CicaleseAuthor

General Explanation of the Viewport

The viewport is the size of the window in which your website is displayed. The snippet of code above is how you override the default viewport settings on mobile devices.

When designing for desktop, the default viewport width is the size of your monitor (or smaller, if you choose to shrink your browser window). This is not the case when designing for a mobile device. Instead of setting the viewport equal to the size of a mobile device’s screen, most mobile browsers will by default display websites with much larger viewports.

For example, most mobile devices have a physical width of 480 pixels or less but have a default viewport of 800 pixels or more. This effectively squashes the website content onto the smaller screen so that it appears very tiny and difficult to read.

The reasoning behind this is that the larger viewport allows your mobile browser to display static, unresponsive websites that were not designed with different device widths in mind, without cutting off any content. The downside of this is that the content is usually quite tiny and impossible to see clearly without zooming in manually.

The Viewport Meta Tag

The viewport meta tag is used to override this default setting so that the viewport is the size of the device screen itself and is used in conjunction with media queries and other aspects of responsive design to make websites functional and aesthetically-pleasing on any size device.

The syntax you included in your question is correct. Properties of the meta viewport tag can be specified in the content attribute.

First up is the width property. width=device-width simply sets the default viewport width to whatever the width of your device’s screen is.

Another property you can specify is the initial scale. initial-scale=1.0 simply sets the degree to which the browser enlarges or zooms in on the website’s content. On most mobile browsers the scale is 1.0 (no zoom) by default anyway, so this portion is not considered strictly necessary.

Of course, if you are overriding the default viewport settings, you also need to use media queries to adjust your content for different sized displays. This is always recommended, as it makes your website much more user-friendly regardless of what device is being used.

Users Who Have Downloaded More RAM:
August R. Garcia (3 years ago)
🐏 ⨉ 1
Posted by Louis J. V. Cicalese 3 years ago

Edit History

• [2018-12-29 0:28 PST] Louis J. V. Cicalese (3 years ago)
🕓 Posted at 29 December, 2018 00:28 AM PST

I am Louis Cicalese, as they say.

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account

Forum— Read More

Find more related content below!

Read More: