當前位置：
首頁 > 最新 > 手機端頁面在項目中遇到的一些問題及解決辦法

手機端頁面在項目中遇到的一些問題及解決辦法

最新 06-07

1.解決頁面使用 overflow: scroll 在 iOS 上滑動卡頓的問題?

首先你可能會給頁面的 html 和 body 增加了 height: 100%, 然後就可能造成 IOS 上頁面滑動的卡頓問題。解決方案是：

(1) 看是否能把 body 和 html 的 height: 100% 去除掉。

(2) 在滾動的容器中增加：-webkit-overflow-scrolling: touch 或者給 body 增加：body 。


(1) 有時 body 和 html 的 height: 100% 去除掉問題可能就沒有了。

(2) 到達臨界值的時候在阻止事件默認行為

有時也會碰見彈窗出來後兩個層的橡皮筋效果出現問題，我們可以在彈出彈出時給底層頁面加上一個類名，類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止，就不會影響彈窗層。


(2) 直接 padding 代替 margin


(1) 添加樣式 cursor ：pointer。點擊後消除背景閃一下的 css：-webkit-tap-highlight-color:transparent;


首先，input 要放在 form 裡面。

這時 "換行" 已經變成 「前往」。

如果想變成 「搜索」，input 設置 type="search"。


出現這種情況的原因不明，有的朋友解釋：我們平時都是點擊的 A 標籤中的文字了。 所以要想用 JS 模擬點擊 A 標籤事件，就得先往 A 標籤中的文字添加能被 JS 捕獲的元素，然後再用 JS 模擬點擊該元素即可。但是我覺得不合理，雖然找不到原因但是解決辦法還是有的。

(1)document.getElementById("abc").click();

(2)$("#abc")[0].click();


這是我們想需要用一個本地的圖片代替沒有找的的圖片

(1) 規範中有規定：如果元素的 transform 值不為 none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1 不只在手機上，電腦上也一樣。除了 fixed 元素會受影響之外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關的屬性都會受到影響。當然如果 transform 元素的 display 值為 inline 時又會有所不同。最簡單的解決方法就是 transform 元素內部不能有 absolute、fixed 元素.


在安卓上面，點擊頁面底部的輸入框，軟鍵盤彈出，頁面移動上移。 而 ios 上面，點擊頁面底部輸入框，軟鍵盤彈出，輸入框看不到了。。。查資料說什麼的都有，iscroll,jquery-moblie，absolute，fixe，static 都非常複雜，要改很多。。。 讓他彈出時讓滾動條在最低部


(1) 所以的 input 必須有 name 不然會出錯


(1)navigator.onLine 可判斷是否是離線狀態.


(1) 用 Object.keys，Object.keys 方法返回的是一個數組，數組裡面裝的是對象的屬性。

(2)Object.getOwnPropertyNames(obj).length


Object.keys 定義：返回一個對象可枚舉屬性的字元串數組；

Object.getOwnPropertyNames 定義：返回一個對象可枚舉、不可枚舉屬性的名稱； 屬性的可枚舉性、不可枚舉性：定義：可枚舉屬性是指那些內部 「可枚舉」 標誌設置為 true 的屬性，對於通過直接的賦值和屬性初始化的屬性，該標識值默認為即為 true，對於通過 Object.defineProperty 等定義的屬性，該標識值默認為 false。

綜合實例：


(1)type="tel"

iOS 和 Android 的鍵盤表現都差不多

(2)type="number"

優點是 Android 下實現的一個真正的數字鍵盤

缺點一：iOS 下不是九宮格鍵盤，輸入不方便

(3)pattern 屬性

pattern 用於驗證表單輸入的內容，通常 HTML5 的 type 屬性，比如 email、tel、number、data 類、url 等，已經自帶了簡單的數據格式驗證功能了，加上 pattern 後，前端部分的驗證更加簡單高效了。

顯而易見，pattern 的屬性值要用正則表達式。

實例 簡單的數字驗證

數字的驗證有兩個：


js 獲取的值是空；比如 - 12，+123 等

簡單的說就是：go(-1): 返回上一頁，原頁面表單中的內容會丟失；back(): 返回上一頁，原頁表表單中的內容會保留。history.go(-1): 後退 + 刷新 history.back(): 後退

之所以注意到這個區別，是因為不同的瀏覽器後退行為也是有區別的，而區別就跟 javascript：history.go() 和 history.back() 的區別類似。 Chrome 和 ff 瀏覽器後退頁面，會刷新後退的頁面，若有數據請求也會提交數據申請。類似於 history.go(-1);

而 safari（包括桌面版和 ipad 版）的後退按鈕則不會刷新頁面，也不會提交數據申請。類似於 javascript：history.back();


IE：不管該行有沒有文字，游標高度與 font-size 一致。

FF：該行有文字時，游標高度與 font-size 一致。該行無文字時，游標高度與 input 的 height 一致。

Chrome：該行無文字時，游標高度與 line-height 一致；該行有文字時，游標高度從 input 頂部到文字底部 (這兩種情況都是在有設定 line-height 的時候)，如果沒有 line-height，則是與 font-size 一致。

IOS 中情況和 Chrome 相似。

設置字體大小和行高一致，然後通過 padding 撐開大小，只給 IE 瀏覽器設置 line-height：-ms-line-height:40px;

原文：https://segmentfault.com/a/1190000015178877 作者：鍵盤上的眼淚

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 JavaScript 的精彩文章:

※聊聊 HTTPS和SSL/TLS 協議
※async/await，了解一下？

TAG:JavaScript |