react vue 在移動端的兼容性問題和一些小細節

時間 2019-11-16

原文原文鏈接

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。html

A. babel-runtime

babel-runtime 的做用是模擬 ES2015 環境，包含各類分散的 polyfill 模塊，咱們能夠在本身的模塊裏單獨引入，好比 promise：vue
它們不會在全局環境添加未實現的方法，只是這樣手動引用每一個 polyfill 會很是低效，咱們能夠藉助 Runtime transform 插件來自動化處理這一切。首先使用 npm 安裝react
而後在 webpack 配置文件的 babel-loader 增長選項： android

B. babel-polyfill

而 babel-polyfill 是針對全局環境的，引入它瀏覽器就好像具有了規範裏定義的完整的特性，一旦引入，就會跑一個 babel-polyfill 實例。用法以下：webpack

安裝 babel-polyfill ios
在入口文件中引用：web

其實作到這些，在大部分瀏覽器就能夠正常跑了。

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 阻止冒泡

阻止冒泡事件分三種狀況npm

A、阻止合成事件間的冒泡，用e.stopPropagation(); promise
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;
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。