移动端网页fixed布局问题解决方案
問題說明
移動端web的footer常常設(shè)計為fixed布局，但是在頁面鍵盤被拉起時fixed的布局會出現(xiàn)問題，自己試了下，在較低版本ios和部分安卓機(jī)上會有此問題。具體問題看圖示：
<body class="layout-fixed"><!-- 可以滾動的區(qū)域 --><main><input type="text" placeholder="Footer..."/><button class="submit">提交</button></main><!-- fixed定位的底部 --><footer></footer> </body>樣式：
header, footer, main {display: block; }footer {position: fixed;height: 34px;left: 0;right: 0;bottom: 0; }main {margin-bottom: 34px;height: 2000px; }?
藍(lán)色的footer是fixed定位，沒有喚起軟鍵盤的時候一切正常。
喚起軟鍵盤，在低版本ios里面就變成：（此問題在iphone4[ios7.1.2]出現(xiàn)，iphone6[ios9.3.1]已經(jīng)修復(fù)）
這個是滑動了一部分頁面的效果，footer不聽話了，沒有留在最底部，跑中間了。
在某些安卓里面（如錘子SM705，安卓4.4.2）看這樣：
footer緊貼軟鍵盤，遮擋后面的區(qū)域。
產(chǎn)生原因：
鍵盤被拉起之后，fixed定位失效了，會跟隨頁面滾動，類似absolute了。布局亂了。
解決方法：
1.使用iscroll.js解決，庫已經(jīng)修復(fù)了這些問題
2.問題是由于滾動區(qū)域可以滾動引起的，那么就指定main為可滾動區(qū)域，就不會影響到footer了：
改動：
<body class="layout-fixed"><!-- 可以滾動的區(qū)域 --><main><div class="content"><input type="text" placeholder="Footer..."/><button class="submit">提交</button></div></main><!-- fixed定位的底部 --><footer></footer> </body> footer {position: fixed;height: 34px;left: 0;right: 0;bottom: 0; }main {/* main絕對定位，進(jìn)行內(nèi)部滾動 */position: absolute;bottom: 34px;overflow-x:auto;overflow-y: scroll; }main .content {height: 2000px; }這樣改了之后又有一個問題，就是滑動在手指離開觸屏之后會停，如果想恢復(fù)之前的特性，還需要做些處理：
main {/* main絕對定位，進(jìn)行內(nèi)部滾動 */position: absolute;bottom: 34px;overflow-y: scroll;/* 增加該屬性 */-webkit-overflow-scrolling: touch; }但在 Android2.3+ 中，因?yàn)椴恢С?overflow-scrolling ，因此部分瀏覽器內(nèi)滾動會有不流暢的卡頓。
3.其實(shí)還有更直接的解決方案，就是，在focus時給另外一個視圖(就是把footer隱藏掉)不顯示footer,在失去焦點(diǎn)時再顯示回來。這個雖然說簡單粗暴，但最有效方便。
4.另外的解決方案就是用js動態(tài)控制footer的樣式，和3的思路類似。需要加一段js,讓原來的元素變成absolute,失去焦點(diǎn)的時候再改回去：
.fixfixed { position:absolute; } $(document).on('focus', 'input', function(e) {$this.addClass('fixfixed');}).on('blur', 'input', function(e) {$this.removeClass('fixfixed');});也可以改成static。
5.思路類似的方法
$(document).on('focus','input',function(e){ $('#viewport').height($(window).height()+'px'); }).on('blur','input',function(e){ $('#viewport').height('auto'); });?
還有其他的一些移動端拉起鍵盤相關(guān)的問題，及解決方案：
參考：http://efe.baidu.com/blog/mobile-fixed-layout/
轉(zhuǎn)載于:https://www.cnblogs.com/linda586586/p/5387073.html
總結(jié)
以上是生活随笔為你收集整理的移动端网页fixed布局问题解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎样对ZBrush中的材料进行渲染和着色
- 下一篇： 团队计划会议-01