国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

liaosilzu2007 / 2755人閱讀

摘要：主要有兩種方式和。的私有標簽，頂端狀態條的樣式。禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在上會顯示成藍色，樣式加成別的顏色也是不生效的。頁面禁止復制選中文本

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

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

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

iOS下 fixed與軟鍵盤的問題

onClick 阻止冒泡

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

頁面禁止復制、選中文本

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

 由于 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-polyfill

 而 babel-polyfill 是針對全局環境的，引入它瀏覽器就好像具備了規范里定義的完整的特性，一旦引入，就會跑一個 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認為用戶更希望的是元素隨著滾動而移動，也就是變成了 absolute 定位），
 既然變成了absolute，所以當頁面超過一屏且滾動時，失效的 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.頁面禁止復制、選中文本

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108756.html

相關文章

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

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

    BingqiChen 評論0 收藏0

  • 前端面試分享: 兩年經驗社招-阿里巴巴

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

    JowayYoung 評論0 收藏0

  • UI大全：前端UI框架集合（持續更新，當前32個）

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

    only_do 評論0 收藏0

發表評論

0條評論

liaosilzu2007

男|高級講師

TA的文章

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