移动端项目代码初始化

移动端项目代码初始化

1.在index.html中，metal标签增加属性（minimum-scale=1.0,maximum-scale=1.0,user-scalable=no）,要求移动端设备，用户去通过手指去放大缩小这样的操作是无效的，它的页面比例始终是1:1；

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

2.在不同的手机浏览器上，默认的样式是不统一的，我们需要把这些不同手机的初始化的样式作一个统一，所以我们要引入一个reset.css，reset.css实际上就是一个重置页面的样式表.

注：assets/styles/reset.css(放置文件常规路径)，然后再引入项目中，在入口文件main.js里（import './assets/styles/reset.css'）

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

3.移动端有一个1px边框问题，有的手机屏幕分辨率比较高，它是一个2倍屏或者三倍屏，如果在页面设置边框1px,它实际上指的是css像素，在2倍屏上会显示2个或者3个物理像素的高度，为了解决这种多倍屏里面，一像素边框会被显示多像素的问题，需要引入一个border.css（border.css通过一个css里面的scale修饰符，真正1px边框实现）。

注：assets/styles/border.css(放置文件常规路径)，然后再引入项目中，在入口文件main.js里（import './assets/styles/border.css'）

 

4.在移动端项目中，存在300ms点击延迟问题，在某些机型或者浏览器上，当使用click事件时候，click会延迟300ms,然后才执行，解决办法：引入一个fastclick库，npm install fastclick --save（ --save的意思是不管在开发环境还是打包成线上代码都需要使用fastclick），然后在入口文件main.js里引入

1.npm install fastclick --save

2.在入口文件main.js里,import fastClick from 'fastclick';   fastClick.attach(document.body)

import fastClick from 'fastclick'

fastClick.attach(document.body)

5.在iconfont里面创建项目，见第一遍博客