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

arashicage 發布于2019-08-30 11:21 / 838人閱讀

摘要：原文地址鍵盤類型問題描述在上只需要更換即可更改鍵盤類型，無效。補充解決方式輸入法頂起頁面問題描述頁面被輸入法頂起，導致滾動，無法鎖定解決方式在當前容器外層再包裹一層，使用來解決這個問題，做一個容器內滾動。

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

input 鍵盤類型問題

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

解決方法:

需要在表單元素外層增加

標簽，才能生效

文本在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)

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

云服務器 GPU云服務器兼容支持webrtc的移動端 webrtc移動端兼容性如何解決兼容問題?Win11僅支持1個I MySQL授權問題總結

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

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

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

摘要：發布于蒙層點擊滾動穿透問題描述移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式蒙層出現的時候，給底部被覆蓋的滾動容器并設置。發布于：https://www.luoyangfu.com/art... 蒙層點擊滾動穿透問題描述: 移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式:蒙層出現的時候，給底部被覆蓋的滾動容器 position: fixe...

Pink 2019-08-02 15:38 評論0 收藏0
移動端兼容問題總結(3)

摘要：發布于蒙層點擊滾動穿透問題描述移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式蒙層出現的時候，給底部被覆蓋的滾動容器并設置。發布于：https://www.luoyangfu.com/art... 蒙層點擊滾動穿透問題描述: 移動端浮層內部滾動的時候，會導致浮層覆蓋的下面內容也會滾動解決方式:蒙層出現的時候，給底部被覆蓋的滾動容器 position: fixe...

siberiawolf 2019-08-30 15:44 評論0 收藏0
移動端兼容問題總結(2)

摘要：發布于上使用等相對變量單位后，為橢圓描述根據網上解決方案設置為具體值即可。在移動端兼容問題解決如果有其他解決方案，請不吝賜教。發布于: https://luoyangfu.com/article... android 上使用 em,rem 等相對變量單位后，border-radius: 50% 為橢圓描述showImg(https://cdn-cos.luoyangfu.com/...

qpwoeiru96 2019-08-02 15:29 評論0 收藏0
移動端兼容問題總結(2)

摘要：發布于上使用等相對變量單位后，為橢圓描述根據網上解決方案設置為具體值即可。在移動端兼容問題解決如果有其他解決方案，請不吝賜教。發布于: https://luoyangfu.com/article... android 上使用 em,rem 等相對變量單位后，border-radius: 50% 為橢圓描述showImg(https://cdn-cos.luoyangfu.com/...

XanaHopper 2019-08-30 11:23 評論0 收藏0