react vue 在移動端的相容性問題和一些小細節
- 使用 ES6 的瀏覽器相容性問題
- react 對低版本的安卓webview 相容性
- iOS下 fixed與軟鍵盤的問題
- react onClick 阻止冒泡
- meta對於移動端的一些特殊屬性
- 頁面禁止複製、選中文字
1.使用 ES6 的瀏覽器相容性問題
由於 Babel 預設只轉換轉各種 ES2015 語法，而不轉換新的 API，比如 Promise，以及 Object.assign、Array.from 這些新方法，這時我們需要提供一些 ployfill 來模擬出這樣一個提供原生支援功能的瀏覽器環境。 主要有兩種方式：babel-runtime 和 babel-polyfill。
A. babel-runtime
-
babel-runtime 的作用是模擬 ES2015 環境，包含各種分散的 polyfill 模組，我們可以在自己的模組裡單獨引入，比如 promise：
-
它們不會在全域性環境新增未實現的方法，只是這樣手動引用每個 polyfill 會非常低效，我們可以藉助 Runtime transform 外掛來自動化處理這一切。 首先使用 npm 安裝
-
然後在 webpack 配置檔案的 babel-loader 增加選項：
B. babel-polyfill
而 babel-polyfill 是針對全域性環境的，引入它瀏覽器就好像具備了規範裡定義的完整的特性，一旦引入，就會跑一個 babel-polyfill 例項。用法如下：
-
安裝 babel-polyfill
-
在入口檔案中引用：
2. react 對低版本的安卓webview 相容性
A.android較低版本webview不支援Object.assign
改用var objectAssign = require('object-assign')
so 這種情況上面方案可以解決
B.import React from 'react';
import ReactDOM from'react-dom';
不可放在其他模組引入的後面，否則android5.0及以下版本webview報錯
複製程式碼3.iOS下 fixed與軟鍵盤的問題
fixed失效是由於軟鍵盤喚起後，頁面的 fixed 元素將失效（ios認為使用者更希望的是元素隨著滾動而移動，也就是變成了 absolute 定位），
既然變成了absolute，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。解決方案就是讓整個頁面處於一屏高度就能解決問題的根本
<body>
<div class='warper'>
<div class='top'></div>
<div class='main'></div>
<div>
<div class="fix-bottom">
</div>
</body>
樣式：
warper{
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;/* 解決ios滑動不流暢問題 */ }
.fix-bottom{
position:fixed;
bottom:0;
width: 100%;
}
複製程式碼4.react onClick 阻止冒泡
阻止冒泡事件分三種情況
-
A、阻止合成事件間的冒泡，用e.stopPropagation();
-
B、阻止原生事件與最外層document上的事件間的冒泡，用e.nativeEvent.stopImmediatePropagation();
-
C、阻止合成事件與除最外層document上的原生事件上的冒泡，通過判斷e.target來避免
5.meta對於移動端的一些特殊屬性
<!--主要I是強制讓文件的寬度與裝置寬度保持1:1，最大寬度1.0，禁止螢幕縮放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--這個也是iphone私有標籤，允許全屏瀏覽。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有標籤，iphone頂端狀態條的樣式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
複製程式碼6.頁面禁止複製、選中文字
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
複製程式碼