An HTML Tutorial of Viewport
In HTML, a "viewport" refers to a virtual window or container within which content is displayed. Viewports are most commonly used in Web designs intended for mobile devices or essentially any "special" device that is not a standard monitor screen, such as an iPad. You can ensure your website is displayed optimally on these devices by using the "viewport" meta tag to control scale and dimension.
Other People Are Reading
Instructions
-
-
1
Open your website's index or header file -- wherever the "<head>" portion of code is presented. If creating a new site from scratch, create a new document in a text or HTML editor called "index.html" and add the following "doctype" declaration to the beginning of the document:
<!DOCTYPE html>
Enter the opening "head" tag just below your "doctype" tag:
<!DOCTYPE html>
<head>
-
2
Add a meta tag below the opening head tag in your document, then close your header:
<meta>
</head>
To affect the viewport, you will need to give your meta tag a name of "viewport:"
<meta name="viewport">
By itself, this tag will do nothing. You need to determine how best to size and scale the viewport to display your finished design and add the corresponding attributes.
-
-
3
Add the "content" attribute to your meta tag. This attribute will take a width, height and scale value to determine how large the viewport is and if it can be scaled by either the user or the device. For example, if you have created a mobile design that is only 320 pixels wide for display on an iPhone, you ideally want it to fill up the entire screen regardless if the user is in portrait or landscape orientation. Additionally, you want the content to scale when viewed on an iPad, which has a default visible area of 980 pixels wide. To accommodate both devices, set the viewport width to "320" and give it an initial scale of "1." The viewport will now be at least 320 pixels wide, but scale appropriately if viewed on a device with a larger screen.
<meta name="viewport" content="width=320, initial-scale=1">
-
4
Change your width value to "device-width" to scale the content to the width of the device dynamically.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
This differs from the first method where the "device-width" value allows the content to fill the device screen by zooming, regardless of how large or small the screen is. Setting a specific width and scale, as in the first example, will expand the viewport itself if the device's screen width is larger than the set width of your "viewport" meta tag, rather than expanding the content.
-
5
Proceed to add your remaining HTML code or customizations to your file, then save and test it. If you are unable to test on multiple devices, you can use an online simulator such as the iPhone Test Simulator or iPad Peek.
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
