Tip:
Highlight text to annotate it
X
Mobile web browsers may scale down your web page.
That may result in an unattractive and unreadable content.
They may also not show the full width of your page.
This makes the user resize and horizontally scroll your page.
Or worse they might just hit the back button so you may find the work that you
put into designing your page becomes ineffective.
So let's look at this problem and the simple
HTML tag to correct it.
As we moved into the age of browsing web sites on devices like smartphones
and tablets we found that a lot of the website's
were scaled down and partially
shown off screen. And that even exists today with a lot of web sites.
Mobile browsers render pages in a virtual window called the viewport
and the web pages are usually wider than the screen so they do not squeeze every
page layout into a tiny window.
In our case for trying to design for the actual screen width.
So the first step is to make sure the devices are aware that we want our page
initially rendered
without any scaling and so that they fit within
100 percent above the actual screen width. This is our practice web page
showing
in an iPhone in portrait mode.
And you can see that the default
for the iPhone was too fit all the content within the screen
but also it scaled down so that it's very tiny to see.
And we could expand that by increasing the scaling with our
gestures. But we really want to design
a view that fits the screen and makes it easy for the user to
read the content and access it without having to make adjustments and scaling.
The mobile version of Safari introduced the
virtual port meta tag this allows the
web developers to control the viewport's size and scaling.
Many other web browsers now support this tag although it's really not part of
any particular web standard.
For the name attribute you just simply said it equals to
the keyword viewport. The content attribute is set
equals to a comma delimited list of name value
pairs. There are different properties for example we see width
and initial scale. There's also user scaleable
and these are pretty much up to the web browser companies to decide what they'd
like to use
in the actual list. So when you're designing for particular device
such as an iPhone, you will really want to set the width to the width
of the device. So in that case we used to width property and we said it equals to
device dash width and that handles that for us. And finally you want to have the
initial scale property set to 1
so that all the content is within the actual device screen
and leave it up to the user if they want to zoom in on their own.
Here you can compare our webpage with and without the
viewport meta tag. The one on the left doesn't have the
viewport meta tag and the one on the right has the one we entered in with the
width
set to the device width and the initial scale set to
one. The styling has not changed. The same CSS
properties are in place. Font sizes, margins, paddings
background colors. And because this is a simple one column page layout
the only real difference we're seeing is that the paragraphs are wrapping a
little sooner and pushing the content further down the page.
For small device widths you are likely to use
single column layouts and smaller size content.
But your design alternatives increase has the width of the devices increase.
For example you can use multiple column layouts and
make larger content. To apply different layouts and styles you will use CSS
media queries to detect device widths. We're going to explore using media
queries in this video series
in all cases you used the meta tag to set the viewport width
and scaling.