移動端問題整理

2021-10-25 07:14:22 字數 881 閱讀 9548

寫h5頁面總會碰上一些相容性問題,之前也碰到了許多問題,但是都沒有做乙個完整的記錄,之後碰到的問題都會記錄下來。

1.使用table畫**時出現ios 邊框顯示不完全2.使用移動端拖動元件react-draggable-tags的拖動和滾動區分

使用這個拖動元件會導致移動端無法區分到拖動還是滾動事件,解決辦法,在拖動元件同級設定乙個div,這個div高度和拖動dom結構等高,層級覆蓋住需要覆蓋的位置即可。

3.移動端使用location.reload(boolean)方法載入頁面沒有重新請求介面4.ios中的z-index失效問題

原因設定了ios的彈性滑動屬性-webkit-overflow-scrolling: touch會導致z-index屬性失效,適情況去掉即可

5.html2canvas在ios中截屏時擷取img失效6. 解決鍵盤彈出後擋表單的問題

window.

addeventlistener

('resize'

,function()

else},

0);}

});

解決方式:判斷當前環境,主動觸發一下滾動事件

(

function()

);}}

());

解決方式:需要記錄之前的路由,使用settimeout進行延時跳轉

settimeout((

)=>);

},100)

移動端的適配整理

一 移動端適配 方法一 viewport自適應螢幕寬度 在html中建立meta標籤 頁面的寬度等於螢幕的寬度。方法二 框架搭建頁面 bootstrap 基於jquery的響應工具,適用於移動端 pc pad等 elementui pc端 mintui 移動端 基於vue元件庫開發 二 移動端問題 ...

移動端的適配整理

一 移動端適配 方法一 viewport自適應螢幕寬度 在html中建立meta標籤 頁面的寬度等於螢幕的寬度。方法二 框架搭建頁面 bootstrap 基於jquery的響應工具,適用於移動端 pc pad等 elementui pc端 mintui 移動端 基於vue元件庫開發 二 移動端問題 ...

移動端web開發整理

移動端定義字型的 body ios端觸控時,會出現乙個半透明灰色遮罩 如果想要禁用,可設定 webkit tap highlight color的alpha值為0 body 關於 ios 與 os x 端字型的優化 橫豎屏會出現字型加粗不一致等 ios 瀏覽器橫屏時會重置字型大小 body 禁止 i...