為什麼?
為什麼要隨時監測螢幕大小,這是因為我們在手機端的時候,常常會遇到這樣的問題:當點選輸入框的時候,手機的鍵盤就會自動浮現,它會使得頁面的可視示高度(document.body.clientheight)發生變化。而我們的輸入框就被可憐的遮擋在小鍵盤後面
怎麼辦?
我們不知道小鍵盤何時會出現,但有一點是可以確定的,當小鍵盤出現的時候,body的可視區域一定為發生變化!!當我們檢測到頁面的可視高度發生了變化,我們就可以確定手機的鍵盤出來了。於是我們就可以使用document.getelementbyid('×××××').scrollintoview();把被小鍵盤遮擋住的輸入框給上移到可視區域。
ps:結合scrollintoview()使用的還有activeelement
,當我們頁面有多個input輸入框時,我們可以使用html5的輔助管理dom功能,document.activeelement屬性始終會引用dom當前獲得的焦點元素。可以獲得當前使用者焦點的元素。
document.activeelement.scrollintoview();
監測手機小鍵盤彈出**:
window.onresize = () => )()}
當我拿到showheight,在vue裡,我就可以通過watch他的變化,然後再執行相應的邏輯**,使用vue.js完整**如下:
data()// 渲染後執行
mounted() )()
}},watch: ,
methods:
} else if (that.docmheight <= that.showheight)
that.timer = false;
}, 20)}}
}
獲取手機螢幕大小
通過windowmanager獲取 displaymetrics dm new displaymetrics getwindowmanager getdefaultdisplay getmetrics dm phonewidth.settext 通過windowmanager獲取的手機螢幕的寬度 d...
索愛手機螢幕大小
96 64 0 r6 p.3 u j100,j110,j120,g m7 y r2 j z y f a p y 101 80 6 k k n p n s0 8 t226,t230,t238,t290,t300,t302,t306,t310,t312,t316,t68i,y n 0 c1 i7 v j...
讓iframe自適應大小 解決方案
第一種 nl ad this.height document.frames src document.body.scrollheight 例子 1,建立頁面 test.html 頁面中含有乙個 iframe,name為 ifrname id為 ifrid,src 為 iframe.html頁面。sc...