設置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">
這個問題貌似只有再ios9中才有
解決方法:在input的父元素上添加相對定位就好了,很是神奇,具體由於啥不太清楚。。ios
style="postion:relative;"
目前有2個方法:web
//input輸入框彈起軟鍵盤的解決方案。 var bfscrolltop = document.body.scrollTop; $("input").focus(function () { document.body.scrollTop = document.body.scrollHeight; }).blur(function () { document.body.scrollTop = bfscrolltop; });
position: absolute; webkit-overflow-scrolling: touch; z-index:1; //js再控制blur //讓頁面向下滑動500 document.body.addEventListener('focusout', function () { window.scrollTo(0,500); })
個人解決方法是,讓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; }
注:ios裏貌似不支持fixed。。。這裏主要指absolute
在position:fixed/absolute內加入:post
-webkit-transform: translateZ(0);
抖動狀況,則在內容區域,加入 :spa
overflow-y: auto;