您的位置：首页 > Web前端 > JQuery

Java及Jquery获取屏幕分辨率的实现代码 推荐

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

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

使用“+”、“-”、“*” 和 “/”四则运算；

可以使用百分比、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主体区域的
自适应高度可以写成 height: calc(100% - 100px)。
即用页面100%减去头部高度100px则等于主体区域高度；注意符号前后要有空格。

该说的知识点都说完了，有什么不懂的地方可以留言咨询，我将第一时间给予各位答复。
如果各位童鞋还有任何建议或比较好的想法，欢迎加入JAVA开发项目讨论群：214404624。
发挥你聪智的大脑，挖掘更新鲜更充满活力的好点子，我们共同探讨技术层面的研究和可实施性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  java js jquery html5 css3
相关文章推荐
新的分享
章节导航