移动端开发需要加的meta和常用的CSS3媒体查询样式,移动开发中头部要加的一些常用meta。
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width"><meta content="telephone=no" name="format-detection"><meta name="applicable-device" content="mobile"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no,email=no">
css 适应不同手机 iphone 4和4s
@media only screenand (min-device-width:320px)and (max-device-width:480px)and (-webkit-min-device-pixel-ratio:2){}
iphone 5 and 5s
@media only screenand (min-device-width:320px)and (max-device-width:568px)and (-webkit-min-device-pixel-ratio:2){}
android 宽度360px
@media only screenand (min-device-width:360px)and (max-device-width:640px){html {font-size:112.5px;}}
android 宽度411px
@media only screenand (min-device-width:400px){html {font-size:128.4375px;}}
iphone 6
@media only screenand (min-device-width:375px)and (max-device-width:667px)and (-webkit-min-device-pixel-ratio:2){html {font-size:117.1875px;}}
iphone 6
@media only screenand (min-device-width:375px)and (max-device-width:667px)and (-webkit-min-device-pixel-ratio:2){html {font-size:129.375px;}}
*{ -webkit-tap-highlight-color:transparent;outline:0;margin:0;padding:0;vertical-align:baseline;fone-size:inherit;line-height:inherit;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,li,pre,form,field,legend,button,input,textarea,th,td{margin:0,padding:0,vertical-align:baseline;}i,em{font-style:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6,strong,b{font-weight:normal;}input,select,button,h1,h2,h3,h4,h5,h6{font-size:inherit;font-family:inherit;}table{border-collapse:collapse;border-spacing:0;}a{text-decoration:none;color:#666;}body{margin:0 auto;min-width:320px;max-width:640px;height:100%;font-family:Microsoft Yahei,Helvetica;line-height:1.5;color:#666;-webkit-text-size-adjust:100%!importtant;text-size-adjust:100% !important;}textarea{resize:none;}input[type="text"],input[type="tel"],input[type="button"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:nione;} body{font-size:0.14rem;-webkit-overflow-scrolling:touch;}html{box-sizing:border-box;font-size:100px;height:100%;-webkit-text-size-adjust:none}*,*:before,*:after{content:"020",display:block;height:0;overflow:hidden;clear:both}