1、页面头部标签申明
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" id="test"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <!--禁止浏览器缩放--> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" /> 8 <!--添加 MobileOptimized 标签，告知ios要以320像素的宽度渲染页面，以防在iPhone4s以下发生图片错位的问题--> 9 <meta name="MobileOptimized" content="320"> 10 <!--清除浏览器缓存--> 11 <meta http-equiv="pragma" content="no-cache"> 12 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 13 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> 14 <!--iPhone 手机上设置手机号码不被显示为拨号链接）--> 15 <meta content="telephone=no, address=no" name="format-detection" /> 16 <!--IOS私有属性，可以添加到主屏幕--> 17 <meta name="apple-mobile-web-app-capable" content="yes" /> 18 <!--屏幕顶部条的颜色--> 19 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 20 21 <title>手机webApp</title> 22 <!--让IE8，IE9，支持CSS3伪类和属性选择器--> 23 <!--[if lte IE 8]> 24 <script src="scripts/selectivizr.js"></script> 25 <![endif]--> 26 <!--让IE9以下的浏览器支持Html5标签和媒体查询器（主要用于响应式网站开发）--> 27 <!--[if lt IE 9]> 28 <script src="scripts/css3-mediaqueries.js"></script> 29 <script src="scripts/html5shiv.js"></script> 30 <![endif]--> 31 </head>
2、css中解决手机WebApp字体和图片等标签问题
1 /* 禁用iPhone中Safari的字号自动调整 */ 2 html { -webkit-text-size-adjust: none; } 3 /* 设置HTML5元素为块 */ 4 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 5 /* 设置图片视频等自适应调整 */ 6 img { max-width: 100%; height: auto; width: auto9; /* ie8 */ } 7 .video embed, .video object, .video iframe { width: 100%; height: auto; }
3、css重置样式
参考：http://www.cnblogs.com/caojiayan/p/6343917.html
1 /* CSS Document */ 2 html, body, div, span, object, iframe,h1, h2, 3 h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, 4 em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, 5 ol, ul, li,fieldset, form, label, legend,table, caption, tbody, 6 tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption, 7 figure, footer, header, hgroup, menu, nav, section, summary,time, mark, 8 audio, video { 9 margin:0; 10 padding:0; 11 border:0; 12 outline:0; 13 font-size:100%; 14 vertical-align:baseline; 15 background:transparent; 16 outline-style:none;/*FF*/ 17 } 18 19 body { 20 line-height:1; 21 } 22 23 a{ 24 margin:0; 25 padding:0; 26 border:0; 27 font-size:100%; 28 vertical-align:baseline; 29 background:transparent; 30 31 } 32 a:hover,a:focus{ 33 text-decoration:none; 34 bblr:expression(this.onFocus=this.blur());/*IE*/ 35 outline-style:none;/*FF*/ 36 } 37 table { 38 border-collapse:collapse; 39 border-spacing:0; 40 } 41 42 input, select { 43 vertical-align:middle; 44 } 45 46 /*css为clearfix，清除浮动*/ 47 .clearfix::before, 48 .clearfix::after{ 49 content: ""; 50 height: 0; 51 line-height: 0; 52 display: block; 53 visibility: hidden; 54 clear: both; 55 } 56 .clearfix:after{clear:both;} 57 .clearfix{ 58 *zoom:1;/*IE/7/6*/ 59 }
4、关于不同设备的媒体查询
1 /* 2 * ----------------------------------------- 3 * 320 ~ 480 4 * ----------------------------------------- 5 */ 6 @media only screen and (min-width: 320px) and (max-width: 480px) { 7 8 } 9 10 /* 11 * ----------------------------------------- 12 * 321 ~ 宽大于321的设备 13 * ----------------------------------------- 14 */ 15 @media only screen and (min-width: 321px) { 16 17 } 18 19 /* 20 * ----------------------------------------- 21 * ~ 320 宽小于320的设备 22 * ----------------------------------------- 23 */ 24 @media only screen and (max-width: 320px) { 25 26 } 27 28 /* 29 * ----------------------------------------- 30 * ~ 480 宽小于480的设备 31 * ----------------------------------------- 32 */ 33 @media only screen and (max-width: 480px) { 34 35 } 36 37 /* medium screens (excludes iPad & iPhone) */ 38 /* 39 * ----------------------------------------- 40 * 481 ~ 767 宽大于480且小于767的iPad和iPhone 41 * ----------------------------------------- 42 */ 43 @media only screen and (min-width: 481px) and (max-width: 767px) { 44 45 } 46 47 /* ipads (portrait and landscape) */ 48 /* 49 * ----------------------------------------- 50 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 51 * ----------------------------------------- 52 */ 53 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 54 55 } 56 57 /* ipads (landscape) */ 58 /* 59 * ----------------------------------------- 60 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 61 * ----------------------------------------- 62 */ 63 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 64 65 } 66 67 /* ipads (portrait) */ 68 /* 69 * ----------------------------------------- 70 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 71 * ----------------------------------------- 72 */ 73 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 74 75 } 76 77 /* 78 * ----------------------------------------- 79 * 1444 ~ 1824 宽大于1444且小于1824的设备 80 * ----------------------------------------- 81 */ 82 @media only screen and (min-width: 1444px) and (max-width: 1824px){ 83 84 } 85 86 /* 87 * ----------------------------------------- 88 * 1824 ~ 宽大于1824的设备 89 * ----------------------------------------- 90 */ 91 @media only screen and (min-width: 1824px) { 92 93 } 94 95 /* 96 * ----------------------------------------- 97 * 2224 ~ 宽大于2224的设备 98 * ----------------------------------------- 99 */ 100 @media only screen and (min-width: 2224px) { 101 102 } 103 104 /* iphone 4 and high pixel ratio (1.5+) devices */ 105 /* 106 * ----------------------------------------- 107 * iphone4 ~ 108 * ----------------------------------------- 109 */ 110 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 111 112 } 113 114 /* iphone 4 and higher pixel ratio (2+) devices (retina) */ 115 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { 116 117 }