jQueryを使用してスクロールバーなしでブラウザービューポートの高さと幅を取得するにはどうすればよいですか？
これが私がこれまでに試したことです：
var viewportWidth = $("body").innerWidth();
var viewportHeight = $("body").innerHeight();このソリューションでは、ブラウザのスクロールバーは考慮されていません。
回答:
$(window).height();
$(window).width();より詳しい情報
ただし、これらの値を取得するためにjQueryを使用することは必須ではありません。使用する
document.documentElement.clientHeight;
document.documentElement.clientWidth;スクロールバーを除いたサイズを取得する、または
window.innerHeight;
window.innerWidth;スクロールバーを含むビューポート全体を取得します。
document.documentElement.clientHeight <= window.innerHeight; // is always truejQueryを使用せず、正しい結果を得るためにJavaScriptを使用してください。
これには、スクロールバーの幅/高さが含まれます。
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);これはスクロールバーの幅/高さを除外します：
var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;
alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);以下は、ほとんどのブラウザー（FF、Cr、IE6 +）で機能する一般的なJSです。
var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
viewportHeight = document.body.clientHeight;
viewportWidth = document.body.clientWidth;
} else {
viewportHeight = document.documentElement.clientHeight;
viewportWidth = document.documentElement.clientWidth;
}間違ったメソッド呼び出しを使用しています。ビューポートは、ドキュメント上で開いている「ウィンドウ」です。ビューポートのどれだけをどこで見ることができます。
を使用し$(window).height()てもビューポートのサイズはわかりませんが、ウィンドウ全体のサイズはわかります。これは通常、ドキュメント全体のサイズですが、ドキュメントがさらに大きくなることもあります。
実際のビューポートのサイズを取得するには、window.innerHeightおよびを使用しwindow.innerWidthます。
https://gist.github.com/bohman/1351439
jQueryメソッドは使用しないでください。たとえば$(window).innerHeight()、これらは誤った数値を与えるためです。彼らはあなたにではなく、ウィンドウの高さを与えますinnerHeight。
window.innerWidthがある場合、はビューポートの幅+スクロールバーの幅を返します。この状況で何ができますか？
以下は、ブラウザのビューポートのサイズを示します。
$(window).height(); // returns height of browser viewport
$(window).width(); // returns width of browser viewportカイルが示唆したように、この方法でスクロールバーのサイズを考慮せずに、クライアントブラウザーのビューポートサイズを測定できます。
サンプル（スクロールバーなしのビューポートの寸法）
// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');
// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');または、スクロールバーのサイズを考慮しながらクライアントビューポートのサイズを確認する場合は、次のサンプルが最適です。
最初に、測定が正確であることを確認するために、ボディタグを100％の幅と高さに設定することを忘れないでください。
body {
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}サンプル（スクロールバーを含むビューポートの寸法）
// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');
// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();
// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');スクリプト$(window).height()は適切に機能します（ビューポートの高さを表示し、スクロールする高さのドキュメントは表示しません）が、ドキュメントにdoctypeタグを正しく配置する必要があります。たとえば、次のdoctypeです。
html5の場合： <!doctype html>
トランジショナルhtml4の場合： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
おそらく、一部のブラウザで想定されているデフォルトのdoctype $(window).height()は、ブラウザの高さではなく、ドキュメントの高さを取ります。doctype仕様を使用すると、問題は十分に解決されます。pepsを使用すると、「スクロールオーバーフローを非表示にしてから元に戻す」ことを回避できると確信しています。 t将来のプログラマーが使用できるように、コードに文書化します。
さらに、スクリプトを作成している場合は、ライブラリのプログラマーを支援するためのテストを作成できます。
$(document).ready(function() {
if(typeof $=='undefined') {
alert("Error, you haven't called JQuery library");
}
if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
alert("ERROR, check your doctype, the calculated heights are not what you might expect");
}
});横幅の画面と小さい画面で、Webサイトの外観を変えたいと思っていました。2つのCSSファイルを作成しました。Javaでは、画面の幅に応じて2つのCSSファイルのどちらを使用するかを選択します。-functionでいくつかのJavaScript を使用してPHP関数を使用echoしていechoます。
私の<header>PHPファイルのセクションにある私のコード：
<?php
echo "
<script>
if ( window.innerWidth > 400)
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
else
{ document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
";
?>