通用
(移動端)300ms點選延遲的問題
- 安裝fastclick庫:
npm install fastclick --save
- 在main.Js中寫入：
import fastClick from 'fastclick'
fastClick.attach(document.body)
複製程式碼(移動端)禁用放大縮小
-
修改viewport
-
在 iOS 10之前，iOS 和 Android 都可以通過一行 meta 標籤來禁止頁面縮放：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
複製程式碼- iOS 10開始，meta 設定在 Safari 內無效
iOS 有一組雙指手勢操作的事件：gesturestart、gesturechange、gestureend
- 完整禁止縮放程式碼
window.onload = function() {
// 阻止雙擊放大
var lastTouchEnd = 0;
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.addEventListener('touchend', function(event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
// 阻止雙指放大
document.addEventListener('gesturestart', function(event) {
event.preventDefault();
});
}
複製程式碼引用iconfont的圖示
- 首先在iconfont的官網建立一個專案，然後選擇圖示新增到專案中，然後使用Unicode下載,將解壓出來的檔案放入專案，需要的檔案有：
iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff以及iconfont.css檔案 - 在
iconfont.css檔案中修改以上四個檔案的路徑 - 在
main.js中匯入iconfont.css檔案 - 在html中使用例子：
<span class="iconfont ">對應圖示的unitcode編碼</span>
複製程式碼input預設呼叫九宮格數字鍵盤
<input type="number" pattern="\d*">
複製程式碼安卓預設可以調出九宮格, 但ios需要加上pattern="\d*"
iOS
iOS H5互動
/**
* 與 ios native 互動
* payClick 定義的丟擲給iOS互動的方法
*/
try {
window.webkit.messageHandlers.payClick.postMessage({
money: this.money
});
return;
} catch (error) {
console.log(error);
}
複製程式碼iOS H5頁面 上下滑動卡頓
/* ios端微信h5頁面上下滑動時卡頓 */
* {
-webkit-overflow-scrolling: touch;
}
複製程式碼iOS input存在重影邊框問題
input {
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
複製程式碼iOS input游標過長
不要給input加高度，加padding撐開就行了
複製程式碼Android
安卓1px邊框丟失
:before:after和transform
/* 一定要在改元素上設定position:relative,before內設定position: absolute */
.person-infos{
position: relative;
&::before{
content: "";
pointer-events: none; /* 防止點選觸發 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-top:1px solid #fff;
transform:scale(0.5);
transform-origin: 0 0;
}
}
複製程式碼- 給不相容的加樣式 如：
border-bottom: 1Px solid #ddd;也可以完美的規避px2rem 的px向rem 的轉化
樣式
placeholder屬性設定字型顏色
- 相容寫法
/* input */
input::placeholder {
color: #666;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #666;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #666;
}
/* textarea */
textarea::placeholder {
color: #666;
font-size: 32px;
}
textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #9c9c9c;
}
textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
font-size: 32px;
}
textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
font-size: 32px;
}
textarea::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #666;
font-size: 32px;
}
複製程式碼