在日常工作種,獲取瀏覽器分辨率的實現模式往往在於前端就能得到很好的處理效果,但不可能避免的是,比如需要通過分辨率識別中英文字符長度進行截取校驗時,在後台把邏輯書寫更方便省時,故引申了後台校驗解析度的需求。
一、Java代碼獲取屏幕分辨率
//类包使用为: java.awt.Toolkit //屏幕分辨率宽度 int screenW = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); //屏幕分辨率高度 int screenH = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); //也可以进行方法封装公共调用 public int getScreenWidth(){ return (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth(); } public int getScreenHeight(){ return (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight(); } //在Java的UI设计中,前端需要居中展示dialog或Iframe内容时,可以通过以上模式获取分辨率进行居中展示 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()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 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>
網頁通用寫法如下,和上面可見寫法:JSf document.body.clientWidth
網頁可見區域高: document.body.clientHeight網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)網頁可見區域高: document.body.Heoff的高)網頁正文全文寬: document.body.scrollWidth網頁正文全文高: document.body.scrollHeight網頁被捲去的高: document.body.scrollTop網頁被捲去的左: document.body.scrollLeft網頁正文部分上: window.screenTop網頁正文部分左: window.screenLeft螢幕解析度的高: window.screen.heightcredows螢幕解析度的寬:window. width
螢幕可用工作區高度: window.screen.availHeight
獲取方法不難,技巧在於多用多記熟能生巧,畢竟對於非H5瀏覽器而言,處理兼容性應用還是挺頻繁的。
1、 calc()語法非常簡單,就像(+)、減(-)、乘(*)、除(/)一樣,使用數學表達式來表示;
2、實例 height: calc(expression) 其中"expression"是一個表達式,用來計算長度的表達式;
c)33個運算的表達式;規則,使用的是數學運算規則,注意加減乘除前後必須保留空格,否則語法不嚴謹。
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>