移動端兼容問題總結(1)

原文地址: https://luoyangfu.com/article...

input 鍵盤類型問題

描述: 在android上只須要更換type 便可更改鍵盤類型，ios無效。

解決方法:

須要在表單元素外層增長<form> 標籤，才能生效

文本在android 偏上問題

描述： 在android上小於12px文本上下居中，android 文本顯示偏上

設置字體爲11px， 上下居中.

解決方式1:

font-size: 22px;
padding: 10px 40px;
border-radius: 40px;
line-height: 22px;
zoom: 0.5;

解決方式2：

font-size: 22px;
padding: 10px 40px;
border-radius: 40px;
transform: scale(0.5);
transform-origin: 0% 0%;

這裏都是經過先放大，而後在縮小來解決這個問題(這裏應該避免使用小於12px 字體的高度)

2019.07.11 記錄

方式1，在使用2倍設計稿的狀況下可能會失效。方式2會佔用當前空間，能夠設置 position: absolute 解決。

補充解決方式:

border-radius: 2px;
font-size: 10px;
padding: 2px 5px;
line-height: normal;
box-sizing: border-box;

ios 輸入法頂起頁面問題

描述：頁面被輸入法頂起，致使滾動，沒法鎖定

解決方式:

在當前容器外層再包裹一層，使用 position: fixed 來解決這個問題，作一個容器內滾動。

iconfont transform 相關操做無效

描述: rotate 一個角度無效

解決方法:

須要直接操做 iconfont::before 這個僞類，不能直接對iconfont操做

.icon::before {
    transform: rotate(90deg);
}

ios 下 document.execCommand(copy) 無效

在ios 下直接使用 input.select() 這種方式無效須要採用下面方式:

input.setSelectionRange(0, data.length)

這種方式來選取文本的長度。