首頁 > Java > java教程 > 主體

Java及Jquery取得螢幕分辨率

伊谢尔伦
發布: 2016-11-21 13:48:26
原創
1698 人瀏覽過

  在日常工作種,獲取瀏覽器分辨率的實現模式往往在於前端就能得到很好的處理效果,但不可能避免的是,比如需要通過分辨率識別中英文字符長度進行截取校驗時,在後台把邏輯書寫更方便省時,故引申了後台校驗解析度的需求。

  一、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瀏覽器而言,處理兼容性應用還是挺頻繁的。

  順帶講解一枚關於CSS3處理自適應效果的屬性,即CSS3的calc() 使用:


  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>
登入後複製

  從上面的實例可以看出,整個頁高為100%,header高度佔用100個像素,那麼mainmain自適應高度可以寫成height: calc(100% - 100px)。

  即用頁100%減去頭部高度100px則等於主體區域高度;注意符號前後要有空格。    






相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板