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

2021-09-13 08:23:42 字數 2090 閱讀 2034

1.使用 es6 的瀏覽器相容性問題

由於 babel 預設只轉換轉各種 es2015 語法,而不轉換新的 api,比如 promise,以及 object.assign、array.from 這些新方法,這時我們需要提供一些 ployfill 來模擬出這樣乙個提供原生支援功能的瀏覽器環境。

主要有兩種方式:babel-runtime 和 babel-polyfill。

a.babel-runtime

1.babel-runtime 的作用是模擬 es2015 環境,包含各種分散的 polyfill 模組,我們可以在自己的模組裡單獨引入,比如 promise:

2.它們不會在全域性環境新增未實現的方法,只是這樣手動引用每個 polyfill 會非常低效,我們可以借助 runtime transform 外掛程式來自動化處理這一切。

首先使用 npm 安裝

3.然後在 webpack 配置檔案的 babel-loader 增加選項:

b.babel-polyfill

而 babel-polyfill 是針對全域性環境的,引入它瀏覽器就好像具備了規範裡定義的完整的特性,一旦引入,就會跑乙個 babel-polyfill 例項。用法如下:

1.安裝 babel-polyfill

2.在入口檔案中引用:
其實做到這些,在大部分瀏覽器就可以正常跑了,

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

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與軟鍵盤的問題

fixed失效是由於軟鍵盤喚起後,頁面的 fixed 元素將失效(ios認為使用者更希望的是元素隨著滾動而移動,也就是變成了 absolute 定位),

既然變成了absolute,所以當頁面超過一屏且滾動時,失效的 fixed 元素就會跟隨滾動了。解決方案就是讓整個頁面處於一屏高度就能解決問題的根本

樣式:warper

.fix-bottom

4.onclick 阻止冒泡

阻止冒泡事件分三種情況

a、阻止合成事件間的冒泡,用e.stoppropagation();

b、阻止原生事件與最外層document上的事件間的冒泡,用e.nativeevent.stopimmediatepropagation();

c、阻止合成事件與除最外層document上的原生事件上的冒泡,通過判斷e.target來避免

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

6.頁面禁止複製、選中文字

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

移動端相容性問題

1 定位問題 ios 2 寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳 3 防止手機中網頁放大和縮小 4 設定web應用是否以全屏模式執行 content的預設值是no 5 自動識別 號碼 telephone no可以禁用這功能,預設值是no 6 禁止複製 選中文字 e...

移動端相容性問題

產生原因 pc端的點選事件在移動端也有效果,但是在移動端使用點選事件會有300毫秒的延遲,如果有兩個元素是重疊的,點選之後上面那個元素消失了就會出現點透事件,如果下面元素有點選事件,就會被觸發,因為執行過程 手指按下之後,會先執行touch事件,然後記錄點選的座標,300ms之後,在該座標上查詢元素...

常見移動端相容性問題

文章 1.ios移動端click事件300ms的延遲相應 移動裝置上的web網頁是有300ms延遲的,往往會造成按鈕點選延遲甚至是點選失效。這是由於區分單機事件和雙擊螢幕縮放的歷史原因造成的。解決方式 fastclick可以解決在手機上點選事件的300ms延遲 zepto的touch模組,tap事件...