最好的a片|免费观看a级片快播

莫著急... 美好的東西往往來的都比較慢!

23 Aug, 2016

web app遇到的一些坑及小技能

  1. 問題:手機端 click 事件會有大約 300ms 的延遲

    原因:手機端事件 touchstart --\> touchmove --> touchend or touchcancel --> click,因為在touch事件觸發之后,瀏覽器要判斷用戶是否會做出雙擊屏幕的操作,所以會等待300ms來判斷,再做出是否觸發click事件的處理,所以就會有300ms的延遲

解決方法:使用touch事件來代替click事件,如 zepto.js 的tap事件和fastClick,還有我自己也寫了個移動端手勢操作庫 mTouch,都有相應的事件可以代替click事件解決這個問題
 

  1. 問題:在部分機型下(如小米4、小米2s、中興) body 設置的 font-size 是用 rem 單位的話,若其他元素沒有設置font-size,該font-size值繼承于body,則會很高概率出現字體異常變大的情況

    原因:估計是跟app的webview默認設置有關,body的font-size使用rem單位,就是相對于 當前根節點的font-size來確定的,可能在某些webview的設置下,body用的是webview設置的默認字體大小,因為在我給html設置 了一個px單位的默認font-size時,還是會出現字體異常變大的情況,具體webview的一些細節就沒有再研究了

解決方法:body設置一個px單位的默認font-size值,不用rem,或者給字體會異常變大的元素設定一個px單位的font-size值
 

  1. 問題:使用zepto的 tap 事件時會出現“點透”bug,比如:一個元素A綁定了tap事件,緊跟其后的元素B綁定了click事件,A觸發tap事件時將自己remove掉,B就會自動“掉”到A的位置,接下來就是不正常的情況,因為這個時候B的click事件也觸發了

    原因:因為tap事件是通過 touchstarttouchmovetouchend 這三個事件來模擬實現的,在手機端事件機制中,觸發touch事件后會緊接著觸發touch事件坐標元素的click事件,因為B元素在300ms內剛好 “掉”回來A的位置,所以就觸發了B的click事件,還有zepto的tap事件都是代理到body的,所以想通過 e.preventDefault()阻止默認行為也是不可行的

解決方法:(1)A元素換成click事件;(2)使用我寫的庫 mTouch 來給A綁定tap事件,然后在事件回調中通過e.preventDefault()來阻止默認行為,或者換用其他的支持tap事件的庫
 

  1.             待續...

    一些有用技能點

  1.             通過設置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器 點擊按鈕或超鏈接之類的 默認灰色背景色

  2.             設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字

  3.             區域性 overflow: scroll | auto 滾動時使用原生效果:-webkit-overflow-scrolling: touch (ios8+,Android4.0+)

  4.             單行、多行溢出省略

    /* 單行省略 */.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 多行省略 */.ellipsis-2l {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;    /* 數值代表顯示幾行 */-webkit-box-orient: vertical;}
  5.             垂直居中常用方法:

    <body><div class="wrap"><div class="box">div>div>body>/* css樣式 */
    
    /* (1) 模仿單行文字居中的方式 */
    .wrap {
    width: 200px;
    height: 80px;
    line-height: 80px;
    }
    
    .box {
    display: inline-block;
    vertical-align:middle;
    }
    
    /* (2) 已知寬高,通過position:absolute; */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    width: 100px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -40px;
    }
    
    /* (3) 未知寬高,通過css3屬性 transfrom */
    .wrap {
    width: 200px;
    height: 200px;
    position: relative;
    }
    
    .box {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }
    
    /* (4) 通過flex布局 */<body><div class="wrap flexbox flexbox-center flexbox-middle"><div class="box">div>div>body>/* css樣式 */
    
    .flexbox {
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex;
    display: flex;
    }
    
    /* 水平居中 */
    .flexbox-center {
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center;
    justify-content: center;
    }
    
    /* 垂直居中 */
    .flexbox-middle {
    -webkit-box-align: center; 
    -moz-box-align: center;
    -ms-flex-align: center; 
    -webkit-align-items: center;
    align-items: center;
    }
  6.             retina屏幕實現真正的1px邊框

    <body><div class="box retina-border rt-bd-all">div>body>/* css樣式 */
    
    .box {
    width: 200px;
    heigth: 100px;
    box-sizing: border-box;
    border: 1px solid #aaa;
    }
    
    /* 去掉元素原有的邊框 */
    .retina-border {
    position: relative;
    border: none;
    }
    
    /* 通過設置偽元素放大到2倍的寬高,設置1px邊框,再縮小1倍,以達到0.5px邊框的效果*/
    .retina-border:after {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
  • 上一篇:騰訊技術干貨!如何做一個讓人聞風喪膽的Html
  • 下一篇:一個完整的Flexbox指南
  • 029-68787028,4000-613-001 & [email protected]

    西安市高新區灃惠南路與科技七路交匯處西南角, 西水·水岸陽光1號樓1-604號

    最好的a片 东京热图片20p 爽到痉挛抽搐不止的番号 日本av女优大爆a片内幕 北京pk10 开拓者vs灰熊 广东11选5规律计 大赢家足球即时赔率 江苏七位数第2ooo5期 椎名由奈 河内5分彩开奖 太原按摩包吹 好运快3开奖号码 明日股票涨跌 沈阳真人麻将下载安装 在线配资平台 杜汶泽成功瘦身后赴日本与av女优拍激情戏