7.26 移動端

時間 2019-11-30

標籤 7.26 移動欄目無線简体版

原文原文鏈接

1. 單位

remjavascript

相對於根元素css

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        /* 20*16px */
        width: 20rem;
        /* 20*16px */
        height: 20rem;
    }
複製代碼

emhtml

字體相對於根元素計算，其餘元素相對於當前元素java

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        font-size: 18px;
        /* 20*18px */
        width: 20em;
        /* 20*18px */
        height: 20em;
    }
複製代碼

2. 事件

1. click

相似於PC端的click，但在移動端中，連續click的觸發有約300ms的延遲

2. touch

touchstart觸摸
touchmove移動
touchend離開
touchcancel系統中止跟蹤觸摸時（打斷）

3. tap

tap點擊一下
longTap長按
singleTap碰一下
doubleTap雙擊

4. swipe

swipe滑動
swipeLeft向左滑動
swipeRight向右滑動
swipeUp向上滑動
swipeDown向下滑動

3. 移動端兼容性問題

1. 設計稿2倍圖實現絕對1px的邊框（0.5px）安卓系統 ios7如下不⽀持0.5px

縮放、寫1px的陰影

<!--css-->
    <style> *{ padding: 0; margin: 0; } div{ width: 2rem; height: 2rem; position: relative; } button{ width: .5rem; height: .3rem; position: absolute; z-index: 2; } div::before{ content: ''; display: block; width: 200%; height: 200%; top: 0; left: 0; border: 1px solid #eeeeee; -webkit-transform: scale(0.5); transform: scale(0.5); transform-origin: 0,0 position: absolute; z-index: 1; } </style>
    <!--html-->
    <body>
        <div>
            <button>點擊</button>
        </div>
    </body>
    <!--js-->
    <script> var Obtn = document.getElementsByTagName("button")[0]; Obtn.onclick = function(){ alert("hello world"); } </script>
複製代碼

2. 低版本安卓⼿機不⽀持背景⾊漸變，在單獨寫⼀個背景⾊

background-color:#ff7e33; 
    background-image:linear-gradient(45deg,#ff5303,#ff9143); 
複製代碼

3. 低版本⼿機尤爲是4.+系統的不支持es6寫法

vconsole會報錯script error ，但沒法查出具體錯誤須要加墊片babel-polyfillios

4.點擊輸⼊框拉起鍵盤輸⼊完成後會發現⻚⾯⾼度⽆法被撐開

（安卓手機會出現）從新獲取⻚⾯高度並賦值es6

5. 圖⽚上傳，不一樣⼿機的input file展示形式不一樣

ios系統⼀般會出現拍照和相冊兩個選項，安卓手機拍照、相冊選擇有時只出現⼀項，有時根據系統不一樣會展現其餘項，12306的webview不⽀持input file 會出現閃退的狀況web

6.ios 11系統input光標錯位（系統自己緣由）

解決方法babel

7.頁面滑動吸頂或吸底效果，手機qq的webview裏沒法拉動

須要阻止頁面的默認動做app

8.ios系統的input框會有⼀個隱形須要去掉

-webkit-appearance: none; 
複製代碼

9.有的⼿機input placeholder⽆法垂直居中

能夠設置input高度小⼀點而後上下加padding字體

網上的解決方式line-height：normal

10.ios系統⾳頻⽆法⾃動播放，需監聽⽤戶有操做以後⼿動觸發

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。