一、Java程式碼獲取螢幕解析度
二、Jquery獲取螢幕解析度,常用方法如下:
通用寫法如下,和上面JS寫法一致:
網頁可見區域寬: document.body.clientWidth
網頁可見區域高: document.body.clientHeight
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)
網頁可見區域高: document.body.offsetHeight (包括邊線的高)
網頁正文全文寬: document.body.scrollWidth
網頁正文全文高: document.body.scrollHeight
網頁被捲去的高: document.body.scrollTop
網頁被捲去的左: document.body.scrollLeft
網頁正文部分上: window.screenTop
網頁正文部分左: window.screenLeft
螢幕解析度的高: window.screen.height
螢幕解析度的寬: window.screen.width
螢幕可用工作區高度: window.screen.availHeight
獲取方法不難,技巧在於多用多記熟能生巧,畢竟對於非H5瀏覽器而言,處理相容性應用還是挺頻繁的。
順帶講解一枚關於CSS3處理自適應效果的屬性,即CSS3的 calc() 使用:
1、 calc()語法非常簡單,就像(+)、減(-)、乘(*)、除(/)一樣,使用數學表示式來表示;
2、例項 height: calc(expression) 其中"expression"是一個表示式,用來計算長度的表示式;
3、calc()的運算規則,使用的是數學運算規則,注意加減乘除前後必須保留空格,否則語法是不嚴謹。
-
使用“+”、“-”、“*” 和 “/”四則運算;
-
可以使用百分比、px、em、rem等單位;
-
可以混合使用各種單位進行計算;
-
表示式中有“+”和“-”時,其前後必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的;
-
表示式中有“*”和“/”時,其前後可以沒有空格,但建議留有空格。
4、calc()應用屬於css3特有屬性,故對當前主流瀏覽器相容性均得到較好支援,IE8以下的就不行了,還是老老實實的透過解析度計算去獲取自適應吧。
5、舉個例項清晰明瞭觀察以下calc()的應用模式
從上面的例項可以看出,整個頁面高度為100%,header高度佔用100個畫素,那麼main主體區域的
自適應高度可以寫成 height: calc(100% - 100px)。
即用頁面100%減去頭部高度100px則等於主體區域高度;注意符號前後要有空格。