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: --> 

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=""></script>

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


/*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) { 

No Comments

Add a comment:


*Required fields