Java 및 Jquery는 화면 해상도를 얻습니다.-java지도 시간-php.cn

Java 및 Jquery는 화면 해상도를 얻습니다.

伊谢尔伦

풀어 주다： 2016-11-21 13:48:26

원래의

1704명이 탐색했습니다.

일상 업무에서 브라우저 해상도를 구하는 구현 모드는 좋은 처리 결과를 얻기 위해 프런트 엔드에 의존하는 경우가 많지만, 해상도를 통해 중국어와 영어 문자의 길이를 식별해야 하는 경우 등 불가피합니다. 차단 및 검증을 위해 백그라운드에서 로직을 작성하는 것이 더 편리하고 시간을 절약하므로 백그라운드 검증 해결의 필요성이 확장됩니다.

1. 화면 해상도를 가져오는 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显示在屏幕中央

로그인 후 복사

2. 화면 해상도를 가져오는 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. 높이 예: calc(표현식) 여기서 "표현식"은 길이를 계산하는 데 사용되는 표현식입니다. 표현식;

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>

로그인 후 복사

위 예에서 볼 수 있듯이 전체 페이지 높이가 100%입니다. , 헤더 높이가 100%이고 100픽셀을 차지하면 본체 영역의 적응 높이는 높이: calc(100% - 100px)로 작성할 수 있습니다.

즉, 페이지의 100%에서 머리 높이에서 100px을 뺀 값은 메인 영역의 높이와 같습니다. 기호 앞뒤에 공백이 있어야 합니다.