踩坑ios H5

目錄

  1. input獲取焦點時,頁面被放大
  2. ios input輸入時白屏
  3. 軟鍵盤撐起頁面下不來
  4. ios頁面滾動不流暢
  5. position:fixed/absolute隨屏幕滾動

1.input獲取焦點時,頁面被放大

設置meta標籤html

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.ios input輸入時白屏

這個問題貌似只有再ios9中才有


解決方法:在input的父元素上添加相對定位就好了,很是神奇,具體由於啥不太清楚。。ios

style="postion:relative;"

3.軟鍵盤撐起頁面下不來

目前有2個方法:web

(1) js控制focus blur
//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});
(2) (待驗證0.0)
position: absolute;
webkit-overflow-scrolling: touch;
z-index:1;

//js再控制blur //讓頁面向下滑動500
document.body.addEventListener('focusout', function () {
    window.scrollTo(0,500);
})

4.ios頁面滾動不流暢

個人解決方法是,讓html和body固定100%(或者100vh),而後再在內部放一個height:100%的div,設置overflow-y: auto;和-webkit-overflow-scrolling: touch;app

.h100scroll {
  /* 模態框之類的div不能放在這個容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

5.position:fixed/absolute隨屏幕滾動

注:ios裏貌似不支持fixed。。。這裏主要指absolute


在position:fixed/absolute內加入:post

-webkit-transform: translateZ(0);

抖動狀況,則在內容區域,加入 :spa

overflow-y: auto;
相關文章
相關標籤/搜索