ptg16476052448 LESSON 16: Using Responsive Web Design
</style>
</head>
<body>
<h1>Testing Viewport</h1>
<img src="16pic01.png">
</body>
</html>There is just a style sheet to remove the margins and set the width of the page to 600px.
Then I’ve got a headline and a picture. If you were to preview this page in your web
browser, both the headline and the image would be fairly big. The image is 320 pixels
wide. The iPhone has an approximate width of 375 pixels, but it is a Retina display, so
it displays at double that resolution, or around 750 pixels wide. When you view the page
without viewport configuration, the headline and the tomato are small and don’t fill the
screen.This is a very simplified explanation of how Retina screens work.
But explaining Retina is beyond the scope of this book. For more
accurate information, check out the Apple website.NOTETo make this page more usable on the iPhone and other mobile devices, you just need to
add one line of HTML to the head of your document:
<meta name="viewport" content="width=device-width">
This tells the browser to display the viewport as if the width were the same as the actual
device width, or around 375 pixels. Then the tomato photo takes up a larger chunk of the
window and the headline is legible. If you extrapolate this out to full sites, you can see
where a site might have been very difficult to read and tap on without the viewport meta
tag.
Previously in this lesson, I mentioned that Google penalizes sites that aren’t mobile
friendly. But just adding this one line can get your site back into the search engine giant’s
good graces.
Here’s the full HTML:Input ▼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">