Vue 项目初始化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhu815496402/article/details/83579177

1.禁止用户缩放页面

index.html：

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

2.解决浏览器样式不一致问题

npm install normalize --save

  main.js：

import 'normalize.css'

3.解决onclick事件300毫秒延迟问题

npm install fastclick --save

  main.js：

import fastClick from 'fastclick'

fastClick.attach(document.body)

4.解决1像素边框问题

index.html中添加：

<style>
html {
font-size: 1px;
}

* {
padding: 0;
margin: 0;
}

.bds_b {
border-bottom: 1px solid #ccc;
}

.a,
.b {
margin-top: 1rem;
padding: 1rem;
font-size: 1.4rem;
}

.a {
width: 30rem;
}

.b {
background: #f5f5f5;
width: 20rem;
}

</style>

<script>

var viewport = document.querySelector("meta[name=viewport]");
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
</script>