abstract:在日常工作種,獲取瀏覽器分辨率的實(shí)現(xiàn)模式往往在于前端就能得到很好的處理效果,但不可能避免的是,比如需要通過(guò)分辨率識(shí)別中英文字符長(zhǎng)度進(jìn)行截取校驗(yàn)時(shí),在后臺(tái)把邏輯書(shū)寫(xiě)更加方便省時(shí),故引申了對(duì)后臺(tái)校驗(yàn)分辨率的需求。一、Java代碼獲取屏幕分辨率//類包使用為: java.awt.Toolkit //屏幕分辨率寬度 int screenW = (int)
在日常工作種,獲取瀏覽器分辨率的實(shí)現(xiàn)模式往往在于前端就能得到很好的處理效果,但不可能避免的是,比如需要通過(guò)分辨率識(shí)別中英文字符長(zhǎng)度進(jìn)行截取校驗(yàn)時(shí),在后臺(tái)把邏輯書(shū)寫(xiě)更加方便省時(shí),故引申了對(duì)后臺(tái)校驗(yàn)分辨率的需求。
一、Java代碼獲取屏幕分辨率
//類包使用為: java.awt.Toolkit //屏幕分辨率寬度 int screenW = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); //屏幕分辨率高度 int screenH = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); //也可以進(jìn)行方法封裝公共調(diào)用 public int getScreenWidth(){ return (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); } public int getScreenHeight(){ return (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); } //在Java的UI設(shè)計(jì)中,前端需要居中展示dialog或Iframe內(nèi)容時(shí),可以通過(guò)以上模式獲取分辨率進(jìn)行居中展示 int screenWidth = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); int screenHeight = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); //類包使用為: javax.swing.JFrame JFrame myFrame = new JFrame(); myFrame.setSize(500, 500)//設(shè)置frame的大小 myFrame.setLocation((screenWidth-500)/2, (screenHeight-500)/2);//設(shè)置frame顯示在屏幕中央
二、Jquery獲取屏幕分辨率,常用方法如下:
<script type="text/javascript"> $(document).ready(function(){ alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?nbsp; alert($(document).width());//瀏覽器當(dāng)前窗口文檔對(duì)象寬度 alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin alert(screen.height);//顯示器分辨率,只能用JavaScript代碼獲 alert(screen.width); }) </script>
通用寫(xiě)法如下,和上面JS寫(xiě)法一致:
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬: document.body.scrollWidth
網(wǎng)頁(yè)正文全文高: document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高: document.body.scrollTop
網(wǎng)頁(yè)被卷去的左: document.body.scrollLeft
網(wǎng)頁(yè)正文部分上: window.screenTop
網(wǎng)頁(yè)正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區(qū)高度: window.screen.availHeight
獲取方法不難,技巧在于多用多記熟能生巧,畢竟對(duì)于非H5瀏覽器而言,處理兼容性應(yīng)用還是挺頻繁的。
順帶講解一枚關(guān)于CSS3處理自適應(yīng)效果的屬性,即CSS3的 calc() 使用:
1、calc()語(yǔ)法非常簡(jiǎn)單,就像(+)、減(-)、乘(*)、除(/)一樣,使用數(shù)學(xué)表達(dá)式來(lái)表示;
2、實(shí)例 height: calc(expression) 其中"expression"是一個(gè)表達(dá)式,用來(lái)計(jì)算長(zhǎng)度的表達(dá)式;
3、calc()的運(yùn)算規(guī)則,使用的是數(shù)學(xué)運(yùn)算規(guī)則,注意加減乘除前后必須保留空格,否則語(yǔ)法是不嚴(yán)謹(jǐn)。
使用“+”、“-”、“*” 和 “/”四則運(yùn)算;
可以使用百分比、px、em、rem等單位;
可以混合使用各種單位進(jìn)行計(jì)算;
表達(dá)式中有“+”和“-”時(shí),其前后必須要有空格,如"widht: calc(12%+5em)"這種沒(méi)有空格的寫(xiě)法是錯(cuò)誤的;
表達(dá)式中有“*”和“/”時(shí),其前后可以沒(méi)有空格,但建議留有空格。
4、calc()應(yīng)用屬于css3特有屬性,故對(duì)當(dāng)前主流瀏覽器兼容性均得到較好支持,IE8以下的就不行了,還是老老實(shí)實(shí)的通過(guò)分辨率計(jì)算去獲取自適應(yīng)吧。
5、舉個(gè)實(shí)例清晰明了觀察以下calc()的應(yīng)用模式
<body style="height: 100%;"> <div id="header" style="height: 100px;"></div> <div id="main" style="height: calc(100% - 100px);"></div> </body>
從上面的實(shí)例可以看出,整個(gè)頁(yè)面高度為100%,header高度占用100個(gè)像素,那么main主體區(qū)域的
自適應(yīng)高度可以寫(xiě)成 height: calc(100% - 100px)。
即用頁(yè)面100%減去頭部高度100px則等于主體區(qū)域高度;注意符號(hào)前后要有空格。
該說(shuō)的知識(shí)點(diǎn)都說(shuō)完了,有什么不懂的地方可以留言咨詢,我將第一時(shí)間給予各位答復(fù)。
如果各位童鞋還有任何建議或比較好的想法,歡迎加入JAVA開(kāi)發(fā)項(xiàng)目討論群:214404624。
發(fā)揮你聰智的大腦,挖掘更新鮮更充滿活力的好點(diǎn)子,我們共同探討技術(shù)層面的研究和可實(shí)施性。