Java and Jquery get screen resolution

　In daily work, the implementation mode of obtaining browser resolution often relies on the front-end to get good processing results, but it is inevitable that, for example, when it is necessary to identify the length of Chinese and English characters through the resolution for interception and verification, in It is more convenient and time-saving to write logic in the background, so the need for background verification resolution is extended.

　 1. Java code to get the screen resolution

//类包使用为： 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显示在屏幕中央

2. Jquery to get the screen resolution. The common method is as follows:

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

The general writing method is as follows, which is consistent with the JS writing method above:

The visible area of ​​the web page is wide: document.body.clientWidth

The height of the visible area of ​​the webpage: document.body.clientHeight

The width of the visible area of ​​the webpage: document.body.offsetWidth (including the width of the edges)

The height of the visible area of ​​the webpage: document.body.offsetHeight (including the edges) height)

The width of the full text of the web page: document.body.scrollWidth

The height of the full text of the web page: document.body.scrollHeight

The height of the web page being scrolled: document.body.scrollTop

The left side of the web page being scrolled: document.body.scrollLeft

Top of the main body of the web page: window.screenTop

Left of the main body of the web page: window.screenLeft

Height of the screen resolution: window.screen.height

Width of the screen resolution: window.screen. width

Screen available work area height: window.screen.availHeight

　 It is not difficult to obtain the method. The trick is to use more and remember more and practice makes perfect. After all, for non-H5 browsers, it is quite frequent to deal with compatibility applications.

　By the way, I will explain an attribute about CSS3 processing adaptive effect, that is, the use of calc() of CSS3:

　1. The syntax of calc() is very simple, like (+), subtraction (-), multiplication (*), Except (/), use mathematical expressions to express;

　2. Example height: calc(expression) Where "expression" is an expression, an expression used to calculate the length;

　3. Operation of calc() Rules use mathematical operation rules. Note that spaces must be left before and after addition, subtraction, multiplication and division, otherwise the grammar will not be rigorous.

　 4. The calc() application is a unique attribute of CSS3, so it has good compatibility with current mainstream browsers. It does not work with IE8 and below. It is better to obtain adaptation through resolution calculation.

　5. Take an example to clearly observe the application mode of calc() below

<body style="height: 100%;">
    <div id="header" style="height: 100px;"></div>
    <div id="main" style="height: calc(100% - 100px);"></div>
</body>

　 As can be seen from the above example, the entire page height is 100%, and the header height occupies 100 pixels, then the main body area

The adaptive height can be written as height: calc(100% - 100px).

　That is, using 100% of the page minus 100px from the head height is equal to the height of the main area; note that there must be spaces before and after the symbol.