Java及Jquery获取屏幕分辨率-javaTutorial-php.cn

Java及Jquery获取屏幕分辨率

伊谢尔伦

Lepaskan： 2016-11-21 13:48:26

asal

1698 orang telah melayarinya

　　在日常工作种，获取浏览器分辨率的实现模式往往在于前端就能得到很好的处理效果，但不可能避免的是，比如需要通过分辨率识别中英文字符长度进行截取校验时，在后台把逻辑书写更加方便省时，故引申了对后台校验分辨率的需求。

　　一、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显示在屏幕中央

Salin selepas log masuk

二、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>

Salin selepas log masuk

通用写法如下，和上面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()的运算规则，使用的是数学运算规则，注意加减乘除前后必须保留空格，否则语法是不严谨。

　　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>

Salin selepas log masuk

　　从上面的实例可以看出，整个页面高度为100%，header高度占用100个像素，那么main主体区域的

　　自适应高度可以写成 height: calc(100% - 100px)。

　　即用页面100%减去头部高度100px则等于主体区域高度；注意符号前后要有空格。