Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using CSS Media Queries, you can build a website that remains legible on a variety of viewports and device orientations. However, it’s critical that you let mobile browsers know your content is mobile-optimized. Otherwise, the browser will still zoom out, and your content will be difficult to read and interact with. Luckily, preventing mobile browsers from zooming out automatically is pretty simple. We’re going to add a meta viewport declaration to the head of every page of our website that’s mobile optimized.
Most of you have probably experienced
what it's like to view a web page on
0:00
a phone that isn't optimized for mobile.
0:05
The mobile browsers zooms out, so
0:09
the width of the entire page
content fits into the viewport.
0:11
To actually read anything,
the user has to pinch to zoom in,
0:16
which is a generally
frustrating experience.
0:20
What you may have not known is that
mobile browsers are programmed to do this
0:25
automatically.
0:30
When Apple launched the iPhone in 2007,
0:32
most websites were not yet
legible on mobile devices.
0:36
So mobile browsers were built
to zoom out on every page load.
0:41
That way, content that isn't optimized for
0:45
mobile could at least
be accessed on a phone.
0:49
A website designed at 960 pixels wide,
0:53
would zoom out to 33% in order to
fit on a 320 pixel phone screen.
0:57
Using CSS media queries,
you can build a website that remains
1:06
legible on a variety of viewports and
device orientations.
1:10
However, it's critical that
you let mobile browsers know
1:15
your content is mobile optimized.
1:19
Otherwise, the browser
will still zoom out and
1:22
your content will be difficult to read and
interact with.
1:26
Luckily, preventing mobile browsers from
1:30
zooming out automatically
is pretty simple.
1:33
We're going to add a meta viewport
declaration to the head of every
1:37
page of our website
that's mobile optimized.
1:42
In the head of the index.html file
containing Developer Diane's Blog post,
1:47
let's add a new meta element.
1:53
The first attribute will add name,
1:58
lets the browser know what
sort of meta element this is.
2:00
It's a viewport declaration.
2:06
The second attribute,
2:11
content, instructs the browser on how
to behave when displaying our content.
2:12
The width property tells the browser that
the width of my content should match
2:26
the width of my device.
2:30
So if the user has a viewport
that's 320 pixels wide,
2:32
my web content should be 320 pixels wide.
2:37
The mobile browser should no longer
expect the content to be wider
2:41
than the actual viewport size.
2:46
The initial-scale property says that
the zoom level should initially be 100%.
2:50
Don't zoom in or out when the page loads.
2:56
The user can still pinch to zoom, if they
want to view content details up close.
3:00
But when the page initially loads,
the browser will no longer zoom out.
3:06
When we preview in the browser, however,
it's hard to tell whether this is working.
3:15
Our page looks just as it did before.
3:20
To see our meta viewport in action,
3:23
we need to make use of the device
preview in our browser.
3:26
Here in our browsers inspect panel.
3:31
I'm going to click the icon for
toggle device toolbar.
3:34
I see a drop down containing a lot
of famous names of mobile devices.
3:39
Galaxy S5, iPad Pro, iPhone X.
3:44
This rotation button is handy,
3:50
if I want to switch my preview
from portrait to landscape.
3:53
And my text looks pretty legible in mobile
view, according to this browser preview.
3:58
Now, let's go back to our code and
comment out the viewpoint declaration,
4:06
and then return to the browser window and
refresh.
4:11
You might need to toggle
your device toolbar off and
4:15
on, to get an accurate preview.
4:19
Some parts of the page are rather
hard to see, aren't they?
4:22
Our mobile browser no longer anticipates
a mobile optimized experience.
4:27
So we'll remove the comment.
4:34
And now our mobile browser
stopped zooming out.
4:38
The meta viewport declaration belongs
in every HTML page you create,
4:43
which of course means, you'll need
to develop mobile optimized content.
4:48
And now you've learned a valuable
browser tool for previewing your work.
4:55
You need to sign up for Treehouse in order to download course files.
Sign up