• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Viewport Meta Tag For Responsive Design

December 17, 2013 //  by Krishna Srinivasan//  Leave a Comment

Responsive design is gaining more importance thanks to the fastest growth in interest usage using mobile phones and tablets. The web design has to adopt the different layouts looking at the user agent details like browser, desktop or mobile device, etc. It is not very easy to provide such a uniform user interface across all the devices. Good news is that there is lot of new things introduced in HTML5 specification to support the responsive design. One of the new addition introduced by Apple is usage of new meta tag “viewport” in the header section of web pages. Later this tag is adopted by other companies and started supporting in all the browsers. The basic syntax would look like this :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

The tag name is viewport and main attribute is “content” whicg takes the comma delimated values as the inputs. Theese values are indicating the desired layout design for the web page. Adding this tag simplifies the responsive design by browser itself detect and adjust the page for the client. If you want the width of the page to be displayed on mobile is 400px, your meta tag would look like this.

<meta name="viewport" content="width=400"/>

If you want the page has to be adjusted with the screen size,

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

If you want the page has to be displayed as you want without any zoom,

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

If you use the “device-width” value, it would cause a problem while viewing in the landscpe by rotating your mobile device. It is recommended not to give the width size.

However this approach is not yet adopted by the W3C group for making it standard. The CSS equivalent for the above meta tag is look like this:

@viewport{
   zoom: 1.0;
   width: device-width;
}

Microsoft started using the CSS approach and not encouraging to use the meta tag from their IE10 browser. But, it is still a long way to go before making it as the standard approach. If you design a web page, you must consider this meta tag if the page users are from the mobile devises.

Category: HTMLTag: CSS, HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Spring Security 3.2 Released
Next Post: PrimeFaces : String Input Elements »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact