DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Understanding The Viewport Meta Tag

Paul Underwood user avatar by
Paul Underwood
·
Dec. 17, 12 · Interview
Like (0)
Save
Tweet
Share
9.43K Views

Join the DZone community and get the full member experience.

Join For Free

When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?

I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.

What Is Responsive Design?

Responsive design is when your website design can adapt to thewidth and height of the device it is being viewed on. Responsive design is done by using media queries in your CSS file to change the styling of your HTML elements depending on certain breakpoints you setup. Just adding a simple width:100% to some elements is enough to make them responsive when viewed on mobile devices.

The breakpoints define a range of widths which will use different CSS styles. This is typically different sizes of devices such as mobile phones, 7 inch tablets, 10 inch tablets, 13 inch laptops and desktop monitors.

You can define the breakpoints as either pixel widths or min device pixel ratio.

The below code will help you can started with media queries.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Boilerplate media queries.

Defining TheViewport

Theviewport meta tag tells the browser how to behave when it renders the webpage, you can tell it how big theviewport will be.

Theviewport is the section of the page in view, an example is viewing a web page on a mobile device, if it is zoomed in to display the top left of the page then theviewport has been set to be a certain width. If you can see the entire width of the page but it is zoomed out to fit it all on the screen, then theviewport has been setup to display the full width of the webpage.

An example of using theviewport meta tag is below.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This defines that the width of theviewport will be the same as the device you are viewing the website on. The scale of the website will be set to 100% and the maximum scale is set to 100%.

Different mobile browsers have different default viewports, most mobile browsers use a default of 980px width viewport which means it will render the webpage in a viewport 980px and will zoom out to fit all of the webpage on.

The smaller device screen you view this website on the more zoomed out you will be. If you compare the same webpage on a iPhone and an iPad the iPhone page will zoomed out more than viewing the page on the iPad.

Changing the values in theviewport will allow you to customize how mobile devices render your website.

Viewport Width

The width that you define in theviewport is like telling the browser this webpage is best viewed in this width. If you have setup a webpage which is best viewed on a iPhone then you will set theviewport to be 320px.

<meta name="viewport" content="width=320">

But this isn't good for responsive designs as if you are viewing this page on a tablet your web page will be zoomed out to just view an area of 320px. The best thing to do for responsive design is to set the width of theviewport to be the same as whatever device is being used.

<meta name="viewport" content="width=device-width">

Viewport Scaling

On mobile devices you can use a pinch gesture to zoom the pages in and out, but if you set theviewport to be the width of the device you don't need to zoom in to see the web page. To make sure that you web page isn't zoomed in when initially displayed you can use a property initial-scale to set the default zoom.

To make sure the user doesn't need to zoom when visiting your page set this to a ratio of 1.

<meta name="viewport" content="initial-scale=1">

If you want to disable your user from scrolling at all you can setup a property maximum-scale to be 1 to make sure you can't scale anymore.

<meta name="viewport" content="maximum-scale=1">

Examples Of Viewports

The below images show examples of viewing the same image in two different viewports. The first image shows the image in the default viewport 980 pixels, the second picture is the same image but viewed in a viewport of 320 pixels.

Image Source: Apple explanation of viewport meta tag.

UnderstandingTheViewport

If you want to see some examples of using the different viewport sizes there is a good Github project which shows you multiple viewport setups. Clicking on the links is a mobile browser will show you how they look.

UnderstandingViewport

Design mobile

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Best Practices for Writing Clean and Maintainable Code
  • Distributed Stateful Edge Platforms
  • What Is Policy-as-Code? An Introduction to Open Policy Agent
  • Web Application Architecture: The Latest Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: