Java と Jquery は画面解像度を取得します-＆＃＆チュートリアル-php.cn

Java と Jquery は画面解像度を取得します

伊谢尔伦

リリース： 2016-11-21 13:48:26

オリジナル

1698 人が閲覧しました

日々の業務において、ブラウザの解像度を取得する実装モードは、良好な処理結果を得るためにフロントエンドに依存することが多いですが、例えば、解像度を通じて中国語や英語の文字の長さを識別する必要がある場合には、必然的に、傍受と検証では、バックグラウンドでロジックを作成する方が便利で時間を節約できるため、バックグラウンド検証の解像度の必要性が高まります。

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記述方法:

Webページの表示領域が広い: document.body.clientWidth

Webページの表示領域の高さ: document.body.clientHeight

の幅Web ページの表示領域: document.body.offsetWidth (端の幅を含む)

Web ページの表示領域の高さ: document.body.offsetHeight (端を含む)

Web ページの全文の幅: document.body.scrollWidth

Web ページの全文の高さ: document.body.scrollHeight

スクロール中の Web ページの高さ: document.body .scrollTop

スクロール中の Web ページの左側: document.body.scrollLeft

Web ページの本体の上部: window.screenTop

Web ページの本体の左側: window.screenLeft

画面解像度の高さ：window.screen.height

画面解像度の幅：window.screen.width

画面利用可能な作業領域の高さ：window.screen.availHeight

メソッドの取得は難しくありません。結局のところ、H5 以外のブラウザでは、互換性のあるアプリケーションに対処することが非常に頻繁にあります。

ところで、CSS3の適応効果、つまりCSS3のcalc()の使い方に関する属性を説明します:

1. calc()の構文は、(+)、減算のように非常に単純です。 (-)、乗算 (*)、(/) を除く、数式を使用して表現します。

2. 高さの例: calc(expression) ここで、「expression」は長さを計算するために使用される式です。 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 ピクセルを占め、次にメイン体の領域

適応的な高さは、height: calc(100% - 100px) として書くことができます。

つまり、ページの 100% からヘッドの高さから 100px を引いたものを使用すると、メイン領域の高さと同じになります。シンボルの前後にはスペースが必要であることに注意してください。