web移动开发时需要加的meta标签和样式的初始化

 

 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />

 

html, body ,div, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,a,img,span,em,i,b,iframe,strong,label{ padding:0; margin:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
html,body{height:100%;/*overflow-x: hidden;*/}
html{-webkit-font-smoothing: antialiased;-webkit-text-size-adjust:none;}
body{font-size: 16px;font-family:sans-serif; color: #000;background-color:#ececec;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section,summary{display:block;}
ol,ul{ list-style: none; }
a{ text-decoration: none; color: #333; cursor: pointer;-webkit-touch-callout:none;}
em, i { font-style: normal; }
img{vertical-align:middle;border:none; -webkit-touch-callout:none;}
a,input, select, textarea,button { padding:0; margin:0;border: 0;outline: 0; border-radius: 0;  -webkit-appearance: none;}
input:disabled{background-color: #fff;}
textarea{resize: none;}
table {border-spacing: 0;border-collapse: collapse;}

::-webkit-scrollbar {width: 3px; height:3px;background-color:transparent; }   
::-webkit-scrollbar-track {background-color:transparent;}    
::-webkit-scrollbar-thumb {background-color:rgba(0, 0, 0, .298039);border-radius: 2px;}

::-webkit-input-placeholder { color: #666;opacity:  1;}
:-moz-placeholder {color: #666;opacity:  1;}
::-moz-placeholder {color: #666;opacity:  1;}
:-ms-input-placeholder {color: #666;opacity:  1;}
/*自适应*/
@media screen and (max-width: 680px) {
    body{font-size: 100%;}
    .wrap{width: 100%;}
}
@media screen and (max-width: 480px) {
    body{font-size: 14px;}
    .wrap{width: 100%;}
}
@media screen and (max-width: 359px) {
    body{font-size: 12px;}
    .wrap{width: 100%;}
}

 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
       <script type="text/javascript" src="/js/lib/respond.min.js"></script>
       <script type="text/javascript" src="/js/lib/html5shiv.min.js"></script>
<![endif]-->

 

直接copy