移动站meta标签怎么做网站初始化设置
我们做手机WAP移动站时,需要使用meta标签做网站初始化设置,这样手机网站就会符合手机浏览界面了。
以下是移动站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%;}
}