Vue 專案初始化
阿新 • • 發佈:2018-11-02
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>