Mobile device reference for web screen design
Control page scale by meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no
, maximum-scale=1, maximum-scale=1"/>
Description
|
attribute |
value |
| width | device-width, pixel(only number, dont need to add PX ex. 320) |
| height | device-height, pixel(only number, dont need to add PX ex. 320) |
| initial-scale | 1 = 100% ex. 0.5 (50%), 1.5 (150%) |
| maximum-scale | 1 = 100% ex. 0.5 (50%), 1.5 (150%) |
| minimum-scale | 1 = 100% ex. 0.5 (50%), 1.5 (150%) |
| user-scalable | no (scale not allowed) / yes (allow scale) |
ps: you do not need to contain all of those attributes in your setting, if you only need your page to scale automatically by device width, and you only need to set your width to device-width. Please refer to the example below for some common used!
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes
, maximum-scale=1.1, maximum-scale=0.9"/>
windows phone solution
<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->
example style sheet structure:
<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />
<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />
<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />
<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />
References:
hacks.mozilla.org (2010) http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
Apple Inc. (2010) http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Microsoft (2011)
http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html
