如果您有過移動端的開發經驗,那么您是否碰到過這樣的問題,一個頁面有輸入框,當這個輸入框聚焦時,輸入框在IOS
下,被移動到手機屏幕的當中去了,而在Android
端,有些瀏覽器的輸入框,會被鍵盤蓋住。
1:前言
接下來就以最常見的頂部和底部固定輸入框來看一下,問題的來源,以及折中的解決方案
輸入區域,在移動端基本上,只用於三種情況
1:固定在頂部的
2:固定在底部的
3:在文檔流中的
我們這里,首先以固定在頂部和底部的為例,來看看它的一些表現。
而這里的問題展示,也是通過一些示例來展示,而在每個示例中,都是使用的最簡單的元素,最簡單的布局,來展示這個問題
2:文檔高度沒有超過一屏
大部分的頂部輸入框,出現的情況都是不會超過一屏的,如果超過一屏,那么大部分的處理方式就是,這個頂部的輸入框是在文檔流內部的,不是一直固定在頁面頂部的,而當輸入框點擊之后,直接跳轉到一個單獨的搜索頁,而搜索頁的內容,一般都是不太多的,基本只包含一些提示信息,並且,在搜索頁的輸入框,也不是那種固定在頂部的。就比如流量那么大的“淘寶的H5頁面”;
這里加一句題外話,其實在移動端的布局中,已經很少有局部是固定布局的了,尤其是一些不常用的功能,原因可以想象為,移動端的可視區域就那么一些,如果很多元素采用了固定布局,那么有效的內容元素,可以展現的就更少了,所以一般除非必要,是不會出現固定布局這樣的情況的?
扯了那么多,接下來就先看看示例吧
如果您在PC
端,想要移動端測試一下,請掃碼:
如果您在移動端,或者在PC端,想要看下源代碼:滾動區域,不大於一屏的DEMO
我個人有在IOS
下,和Android
下測試一下,結果如下:
上輸入框,在IOS
和Android
下,都正常
下輸入框,在IOS
下,會彈到鍵盤上面,雖不是緊挨着鍵盤,但是情況可以接受。
下輸入框,在Android
的某些瀏覽器下,會被蓋住,在大部分瀏覽器下,都是緊挨着鍵盤的
3:文檔高度超過一屏
有時候,會有這么一種情況,我固定在頂部和底部的輸入框,就是需要在一個很大的頁面中,有一個固定在頂部或者是底部的輸入框,比如一些實時聊天的界面,或者是彈幕交互的界面。
但是呢,除了這些固定之后,其他的一些元素,是占據了很大文檔空間的,就是說,其他的元素高度,是超過一屏的高度的,所以來看看這個時候的情況:
如果您在PC端,想要移動端測試一下,請掃碼:
如果您在移動端,或者在PC端,想要看下源代碼:滾動區域,大於一屏的DEMO。
該情況,如果您是Android
機的話,這里可以不做測試,因為其展示形式,和文檔不超過一屏的展示形式,基本一樣的,該出什么問題,還是有什么問題,這里主要是IOS
下的問題,而且問題非常嚴重。
如果您沒有發現問題,那么就把頁面滾動到最底部的時候,點擊頂部的輸入框,把頁面滾動到最頂部的時候,點擊固定在底部的輸入框,就可以看到問題了。
我看到的結果,可以描述如下:
Android
:上輸入框表現正常,下輸入框:相同的問題,有的表現正常,有的會被鍵盤蓋住
IOS
下:上輸入框,會把body
的滾動區域,整體滾動到最上面,導致錯位
IOS
下:下輸入框,會把body
的滾動區域,整體滾動到最下面,導致錯位
當body
的區域,大於一屏時,基本IOS
下的輸入框上下固定,是不可用的
4:小結
我們來總結一下,上面兩個示例的情況:
1:輸入框是固定在頂部和底部的,使用的是fixed
的
2:其他的內容區域是普通文檔流,文檔高度試了兩種:不超過一屏和超過一屏
這里因為是給的最簡單的示例,那么就代表着,基本不會受到其他屬性的影響,那么問題就來了:
首先,輸入框固定在頂部和底部,使用fixed
是沒有問題的,不然無法固定,也不能實時的去計算,而且在IOS
下,當頁面在滾動的時候,為了有更好的滾動體驗,是停止CSS
渲染和JS
的執行的,所以也不能實時的去計算,然后進行固定,所以使用fixed
的固定,是必須要使用的。
那么,問題就只剩下兩個了:
1:內容區域是普通文檔流
2:內如區域的高度,超過一屏
就這兩個問題,我們前面已經看到了一種情況,就是當文檔不超過一屏時,在IOS
和Android
下的表現效果,還是可以接受了,除了在Android
的某些瀏覽器下,底部輸入框會被鍵盤蓋住之外,並沒有其他的不好的效果,尤其是頂部輸入框,都是可以完美的使用。
所以,這里的問題解決方案,就只剩下了一個,那么就是控制高度最多顯示為一屏的內容,這個也是我認為的,一個不錯的解決方案,移動端單屏布局方式。
雖然是單屏,但是內容區域,總不能限制為一點點內容了,所以,這里剩下的解決方案,就只剩下了一種,內容區域也使用固定布局
重新多添加一層div
,該元素把所有非固定布局的元素包含在內(固定布局的不要包含,有問題的,這個在之后再寫一篇文章,來說明這個問題)。讓這個div
占據屏幕的可視區域,但是,又不讓這個區域超出一屏的內容。所有的非固定元素,都在該div
內部滾動,那么接下來,就看看效果如何吧。
5:單屏布局方式–解決方案
其主要的HTML和CSS如下:
<div class="input-top"> <input class = "input" type = "text" placeholder = "頂部輸入框" /> </div> <div class="input-bottom"> <input class = "input" type = "text" placeholder = "底部輸入框" /> </div> <div class="wrapper"> 該元素區域,占據很大的高度 </div>
.wrapper{ position:absolute; top:30px; left:0px; right:0px; bottom:30px; overflow:auto; -webkit-overflow-scrolling : touch; }
查看示例效果:
如果您在PC
端,想要移動端測試一下,請掃碼:
如果您在移動端,或者在PC端,想要看下源代碼:單屏布局方式-解決上下輸入框固定在頂部和底部的DEMO
表現效果:
Android
:上輸入框表現正常,下輸入框:相同的問題,有的表現正常,有的會被鍵盤蓋住(會出現該情況的手機,占據少數,而且跟瀏覽器相關)
IOS
下:上輸入框表現正常
IOS
下,下輸入框會彈到鍵盤上面,雖不是緊挨着鍵盤,但是情況可以接受。
所以這種情況下,是可以使用的,最好再把Android
下的問題,解決一下,那么該方法,將是固定輸入框的最佳解決方案了
Android
的手機,表現形式依然和前面的兩個示例,基本一致。
主要還是看IOS
的表現了,從示例中,可以看到,表現與第一個示例,表現差不多,原因在於,它就是屬於第一種的情況,文檔高度,是低於一屏的。其表現形式也是很給力,頂部輸入框,可以完美的解決,底部輸入框稍微跳動,不過可以接受。
如果您使用這種布局,而且需要的是頂部輸入框固定的話,而且又不能跳轉新頁來實現該方法的話,那么單頁布局方式,將會非常有效,所以請考慮。
6:輸入框在普通流中
單頁布局,只適用於,需要固定布局的時候,其他的時候,還是使用普通流布局為好,畢竟越普遍的東西,其兼容性會越好,雖然理論上,單頁布局,不會出現其他的問題,但是誰又能保證一些瀏覽器,會被使用者,改成什么樣子呢。
而固定布局,其實也主要是為了解決IOS
端的問題,對於Android
端的,其實大可以直接使用普通布局來實現的,只是如果寫兩套的話,也有些麻煩的。
那么我們再來看看,輸入框在普通文檔流內部時的情況吧:
這個情況,在我看來,應用場景,是比前面固定布局的應用場景多的。該部分的內容,本篇就不做說明,因為雖然有些想法,但當前這些想法並沒有在實際中應用過,也沒有測試過一些機型,沒有經過驗證的東西,說出來就會變得有些不負責任了。
待我之后在項目中,以項目為試驗對象,總結研究過之后,再來說說普通流中,輸入框在Android下的一些易發狀況,以及處理方式。
總結
這位博主寫的很詳細但是還有些問題 ipone中第一次焦點時軟鍵盤會遮住部分輸入框,
使用焦點時
interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100);
失去焦點取消
clearInterval(interval);
可以解決遮住的問題
本篇到此為止。
如果您發現文中有描述錯誤或者不當的地方,請留言指出,不勝感激,謝謝!
本文屬於原創文章,如需轉載,請注明出處,謝謝!