移動端問題總結分享

2022-05-04 17:18:04 字數 1296 閱讀 8945

穿透問題。

問題:ios 和 android 手機上都會出現;

當a 層蓋在b層上時,a層繫結touchend 或 touchstart 事件讓自己關閉,b層是個a 標籤元素,那麼使用者點選a層的時候,a層關閉 並且頁面會根據b層的 a 標籤的href進行跳轉。

神奇的是,給b層加上 e.preventdefault() 還是阻止不了頁面的跳轉,也就是根本沒有觸發 b 層上的繫結事件,但還是跳轉了。

解決:首先點選元素觸發事件的先後順序:touchstart, touchend, mousedown, mouseup, click

不用 touchend 事件, 用click 或 mousedown 或 mouseup事件,但這在手機端可能不太好

給a 整個層或者某個元素 繫結touchstart 並且e.preventdefault() , 如果這個元素是 a , 那麼必須用 location.href 去跳轉;如果是 input 框,則不能用 e.preventdefault(),否則你不能輸入任何字元,所以得加個判斷。

animate 的 stop 問題

問題:手機端由於用 css3 做動畫,所以 zepto.js 沒有 stop 方法。

聲音問題

rem問題:為了能像pc端一樣隨心所欲的切 640寬度下的頁面

解決:先約定好:對於 640px 下的 html 根元素定義 font-size: 100px, 然後在頁面的 head 加入以下**,  那麼當乙個元素是 10px 時,你只要寫成 0.1rem,方便快捷。

var fitpage = function(){

var w = $('html').width();

w = w > 640 ? 640: w;

var neww = w/640 * 100;

$('html').css({

fontsize: neww

fitpage();

5: 判斷是否是手持裝置

本來偶是寫 『ontouchstart』 in window

參考了下 jquery mobile,改成'ontouchend' in document

6: 元素的上下居中

之前是用 table 去居中的,後面發現其實用 flex-box 應該會更好,後面會嘗試使用。

7:還在為禁用按鈕而煩惱嗎?還在為傳送簡訊驗證碼遮蔽按鈕而寫一堆js嗎

只需2個屬性,一切js都是浮雲~~~~看例子吧:

(pointer-events:none;主要解決部分ios 不相容 disabled )

是的,就這麼簡單!!!  不單單按鈕,各種妙用,自己去體驗吧~

移動端問題總結

1.有時,通過審查元素並不會發現html有問題,但就是在螢幕中左右晃動,無法解決,這時候,其實是存在子元素溢位來了,所以加大了寬度。解決方法 給html或者是body新增overflow x hidden 這樣就可以成功解決問題,但是問題是一旦設定了body的overflow x hidden 這時...

移動端個人問題總結

移動端ios與android的一些相容問題 1.1關於滾動 為了使ios的滾動更流暢,webkit overflow scrolling touch scrollcontainer 1.2 關於 ios上input預設樣式問題 上邊框陰影與圓角 input 1.3 更改表單輸入框placeholde...

移動端開發流程分享

1.由於產品及ui能力限制,不能達到理想狀態,從以往專案開發中總結發現,在開發及測試週期中發現需求缺陷問題,需要花費大量的溝通成本,導致專案週期有所影響並嚴重影響開發效率和開發質量,解決方案 再產品需求 原型設計及ui階段,開發需要嚴格把控質量,幫助產品提公升交付件的質量 2.由於介面開發人員未討論...