成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react 移動端 兼容性問題和一些小細(xì)節(jié)

liaosilzu2007 / 2768人閱讀

摘要：主要有兩種方式和。的私有標(biāo)簽，頂端狀態(tài)條的樣式。禁止數(shù)字自動識別為電話號碼，這個比較有用，因為一串?dāng)?shù)字在上會顯示成藍(lán)色，樣式加成別的顏色也是不生效的。頁面禁止復(fù)制選中文本

react 移動端 兼容性問題和一些小細(xì)節(jié)

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

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

iOS下 fixed與軟鍵盤的問題

onClick 阻止冒泡

meta對于移動端的一些特殊屬性

頁面禁止復(fù)制、選中文本

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

 由于 Babel 默認(rèn)只轉(zhuǎn)換轉(zhuǎn)各種 ES2015 語法，而不轉(zhuǎn)換新的 API，比如 Promise，以及 Object.assign、Array.from 這些新方法，這時我們需要提供一些 ployfill 來模擬出這樣一個提供原生支持功能的瀏覽器環(huán)境。
 主要有兩種方式：babel-runtime 和 babel-polyfill。

A.babel-runtime
  1.babel-runtime 的作用是模擬 ES2015 環(huán)境，包含各種分散的 polyfill 模塊，我們可以在自己的模塊里多帶帶引入，比如 promise：
![圖片描述][1]

  2.它們不會在全局環(huán)境添加未實現(xiàn)的方法，只是這樣手動引用每個 polyfill 會非常低效，我們可以借助 Runtime transform 插件來自動化處理這一切。
  首先使用 npm 安裝
![圖片描述][2]

  3.然后在 webpack 配置文件的 babel-loader 增加選項：
![圖片描述][3]

B.babel-polyfill

 而 babel-polyfill 是針對全局環(huán)境的，引入它瀏覽器就好像具備了規(guī)范里定義的完整的特性，一旦引入，就會跑一個 babel-polyfill 實例。用法如下：
 1.安裝 babel-polyfill
![圖片描述][4]

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

其實做到這些，在大部分瀏覽器就可以正常跑了，

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認(rèn)為用戶更希望的是元素隨著滾動而移動，也就是變成了 absolute 定位），
 既然變成了absolute，所以當(dāng)頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。解決方案就是讓整個頁面處于一屏高度就能解決問題的根本
  
    
 
        
 
        
 
    
 
    

    
 


樣式：
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 阻止冒泡
阻止冒泡事件分三種情況

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

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

6.頁面禁止復(fù)制、選中文本

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108756.html

相關(guān)文章

  • react 移動端 兼容性問題和一些小細(xì)節(jié)

    摘要：主要有兩種方式和。的私有標(biāo)簽，頂端狀態(tài)條的樣式。禁止數(shù)字自動識別為電話號碼，這個比較有用，因為一串?dāng)?shù)字在上會顯示成藍(lán)色，樣式加成別的顏色也是不生效的。頁面禁止復(fù)制選中文本 react 移動端 兼容性問題和一些小細(xì)節(jié) 使用 ES6 的瀏覽器兼容性問題 react 對低版本的安卓webview 兼容性 iOS下 fixed與軟鍵盤的問題 onClick 阻止冒泡 meta對于移動端的一些...

    BingqiChen 評論0 收藏0

  • 前端面試分享: 兩年經(jīng)驗社招-阿里巴巴

    摘要：作者兩年經(jīng)驗第一家任職的是個小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續(xù)了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經(jīng)驗, 第一家任職的是個小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經(jīng)歷....

    JowayYoung 評論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個）

    摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<