Home » andriod » How to Design for Mobile Layouts

How to Design for Mobile Layouts

Recently, during a Web Site development project, I came across the need to design responsive layout. The most simplest way one can achieve is to add Mobile responsive meta tags. Details could be read here.


and last but not the least.

If reading is not your forte, add the following META tags in the all your HTML templates, or include them using Server Include / Require

<!-- Mobile specific Metas-->
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1.0, width=device-width" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="MobileOptimized" content="320">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<!-- Mobile specific Metas-->

<!-- Given the option, one could also include the same properties via CSS.-->


/* Class for Mobile View handling */
width: extend-to-zoom;
zoom: 1.0;
width: extend-to-zoom;
zoom: 1.0;
/* Class for Mobile View handling */



2 thoughts on “How to Design for Mobile Layouts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s