成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

liaosilzu2007 / 2847人閱讀

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

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

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

react 對(duì)低版本的安卓webview 兼容性

iOS下 fixed與軟鍵盤的問題

onClick 阻止冒泡

meta對(duì)于移動(dòng)端的一些特殊屬性

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

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

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

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

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

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

B.babel-polyfill

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

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

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

2.react 對(duì)低版本的安卓webview 兼容性

A.android較低版本webview不支持Object.assign改用var objectAssign = require("object-assign’)  這種情況上面方案可以解決
B.import React from "react";import ReactDOM from "react-dom";//不可放在其他模塊引入的后面，否則android5.0及以下版本webview報(bào)錯(cuò)

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

 fixed失效是由于軟鍵盤喚起后，頁面的 fixed 元素將失效（ios認(rèn)為用戶更希望的是元素隨著滾動(dòng)而移動(dòng)，也就是變成了 absolute 定位），
 既然變成了absolute，所以當(dāng)頁面超過一屏且滾動(dòng)時(shí)，失效的 fixed 元素就會(huì)跟隨滾動(dòng)了。解決方案就是讓整個(gè)頁面處于一屏高度就能解決問題的根本
  
    
 
        
 
        
 
    
 
    

    
 


樣式：
warper{ 
    position: absolute; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;/* 解決ios滑動(dòng)不流暢問題 */ }
.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對(duì)于移動(dòng)端的一些特殊屬性

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108756.html

相關(guān)文章

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

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

    BingqiChen 評(píng)論0 收藏0

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

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

    JowayYoung 評(píng)論0 收藏0

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

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

    only_do 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<