最近在寫一個(gè)簡(jiǎn)易的移動(dòng)端發(fā)布帖子的功能糠聪。
在頁面底部有個(gè)功能區(qū),用來上傳圖片之類的谐鼎。要求是在鍵盤彈起來的時(shí)候會(huì)浮在鍵盤上面舰蟆。
當(dāng)時(shí)想的這不簡(jiǎn)單么,直接用個(gè)fixed就完事了狸棍。但是發(fā)現(xiàn)在ios上會(huì)有問題身害。
因?yàn)榘沧挎I盤彈起來的時(shí)候是直接把整個(gè)頁面都給縮小了,所以fixed會(huì)跟著跑隔缀,但是ios并不會(huì)這樣题造。
沒彈起的時(shí)候
鍵盤彈起之后就被鍵盤遮住了
彈起的時(shí)候
然后在我不懈努力的百度之下,我發(fā)現(xiàn)了一篇文章猾瘸。
這篇文章里面講到了一個(gè)新的API界赔。
MDN的文檔地址
VisualViewport可以獲取到鍵盤彈起之后的窗口高度丢习。然后用沒彈起的減去現(xiàn)在的就是你定位需要用到的位置啦。
使用之后的效果
但是這個(gè)API存在兼容性問題淮悼,從IOS13才開始支持咐低。用的是需要注意一下是否有這方面的兼容需求