Responsive Web Design

12 April 2011 14:25 | Comments: 0 | Categories:

How to make a website work on a Mobile Device?

Some useful links:

From Less Framework 4; the bare basics, excluding the column grid settings:

HML Header

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: 
http://filamentgroup.com/examples/iosScaleBug/ --> 

Note these alternatives (not from Less)</>

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

This for IE8

<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Best put at the end of the <head>, after the CSS links.

CSS

/*Default Layout: 
-------------------------------------------------------------------------------*/


/*Tablet Layout: 768px.
-----------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
}


/*Mobile Layout: 320px.
Inherits styles from: Default Layout.
---------------------------------------------*/
@media only screen and (max-width: 767px) {
}


/*Wide Mobile Layout: 480px.
Inherits styles from: Default Layout, Mobile Layout. 
---------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) { 
}
Tags:

No Comments

Add a comment:

Code

*Required fields