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

時間 2019-11-16

原文原文鏈接

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

使用 ES6 的瀏覽器兼容性問題
react 對低版本的安卓webview 兼容性
iOS下 fixed與軟鍵盤的問題
onClick 阻止冒泡
meta對於移動端的一些特殊屬性
頁面禁止複製、選中文本

1.使用 ES6 的瀏覽器兼容性問題html

因爲 Babel 默認只轉換轉各類 ES2015 語法，而不轉換新的 API，好比 Promise，以及 Object.assign、Array.from 這些新方法，這時咱們須要提供一些 ployfill 來模擬出這樣一個提供原生支持功能的瀏覽器環境。
 主要有兩種方式：babel-runtime 和 babel-polyfill。

A.babel-runtime
  1.babel-runtime 的做用是模擬 ES2015 環境，包含各類分散的 polyfill 模塊，咱們能夠在本身的模塊裏單獨引入，好比 promise：
![圖片描述][1]

  2.它們不會在全局環境添加未實現的方法，只是這樣手動引用每一個 polyfill 會很是低效，咱們能夠藉助 Runtime transform 插件來自動化處理這一切。
  首先使用 npm 安裝
![圖片描述][2]

  3.而後在 webpack 配置文件的 babel-loader 增長選項：
![圖片描述][3]

B.babel-polyfillreact

而 babel-polyfill 是針對全局環境的，引入它瀏覽器就好像具有了規範裏定義的完整的特性，一旦引入，就會跑一個 babel-polyfill 實例。用法以下：
 1.安裝 babel-polyfill
![圖片描述][4]

 2.在入口文件中引用：
![圖片描述][5]

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

2.react 對低版本的安卓webview 兼容性webpack

A.android較低版本webview不支持Object.assign改用var objectAssign = require('object-assign’)  這種狀況上面方案能夠解決
B.import React from 'react';import ReactDOM from 'react-dom';//不可放在其餘模塊引入的後面，不然android5.0及如下版本webview報錯

3.iOS下 fixed與軟鍵盤的問題ios

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.onClick 阻止冒泡
阻止冒泡事件分三種狀況web

A、阻止合成事件間的冒泡，用e.stopPropagation();
![圖片描述][6]
B、阻止原生事件與最外層document上的事件間的冒泡，用e.nativeEvent.stopImmediatePropagation();
![圖片描述][7]
C、阻止合成事件與除最外層document上的原生事件上的冒泡，經過判斷e.target來避免
![圖片描述][8]

5.meta對於移動端的一些特殊屬性npm

<!--主要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.頁面禁止複製、選中文本promise

-webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
  user-select: none;

相關標籤/搜索

每日一句

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

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

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

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

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