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