移动端项目初始化事项

1、html中head下的meta标签

在初始化移动端的HTML项目时，我们需要在

<meta name="viewport">

的content内容中加上

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

name="viewport"表示的是用户的视图缩放事项，后面content就表示该事项的设置内容，每个参数代表的意思有兴趣的朋友可以自己去搜索一下

Tip：Opera移动浏览器不支持 user-scalable=no 这个参数

 

2、css

因为各个浏览器支持的样式不同，不同的默认样式会导致不同的显示结果，所以我们要把css中常用的标签初始化，达到各主流浏览器都支持的状态，向项目中添加 reset.css

/* reset.css
 * Author: Wu Xi <wuxi889@vip.qq.com>
 */
@charset "utf-8";
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
    html,body {
          font-size: 288% !important;
    }
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
    html,body {
          font-size: 256% !important;
    }
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
    html,body {
          font-size: 213.33% !important;
    }
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
    html,body {
          font-size: 192% !important;
    }
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
    html,body {
          font-size: 160% !important;
    }
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
    html,body {
          font-size: 100% !important;
        font-size:9.375px;
    }
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
    html,body {
          font-size: 144% !important;
    }
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
    html,body {
          font-size: 128% !important;
    }
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
    html,body {
          font-size: 110.4% !important;
    }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
    html,body {
          font-size: 106.67% !important;
    }
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
    html,body {
        font-size: 100% !important;5.859375px;
    }
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
    html,body {
          font-size: 96% !important;
    }
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
    html,body {
          font-size: 85% !important;
    }
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
    html,body {
          font-size: 64% !important;
    }
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    font-family: "Microsoft YaHei", "Arial", "黑体", "宋体", sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input {
    outline: none;
}
a {
    text-decoration:none;
    color: #000;
}

 

另外，因为移动端倍屏的原因，有的手机会出现 border边框1像素 的问题，所以还要加入一个 border.css 来校正这个问题

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
    position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
    content: "\0020";
    overflow: hidden;
    position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
    left: 0;
    width: 100%;
    height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
    top: 0;
    width: 1px;
    height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    border-top: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
    border-right: 1px solid #eaeaea;
    transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
    border-bottom: 1px solid #eaeaea;
    transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
    border-left: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
    right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
    bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
    left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
    /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
    .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.5);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.5);
    }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
    .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.33333);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.33333);
    }
}

3、移动端点击事件300ms延迟

移动端的点击事件300ms延迟，我们可以安装fastclick来解决， 具体安装流程请参考 https://majing.io/posts/10000007721218

以上