現在のブラウザーの幅を取得するJavaScript関数を記述しようとしています。
私はこれを見つけました：
javascript:alert(document.body.offsetWidth);しかし、ボディの幅が100％の場合、失敗するという問題があります。
他にもっと良い機能や回避策はありますか？
現在のブラウザーの幅を取得するJavaScript関数を記述しようとしています。
私はこれを見つけました：
javascript:alert(document.body.offsetWidth);しかし、ボディの幅が100％の場合、失敗するという問題があります。
他にもっと良い機能や回避策はありますか？
回答:
私の元の答えは2009年に書かれました。それでも動作しますが、2017年に更新したいと思います。ブラウザーの動作は異なる場合があります。私はjQueryチームがブラウザ間の一貫性を維持する上で素晴らしい仕事をすることを信頼しています。ただし、ライブラリ全体を含める必要はありません。jQueryソースの関連部分は、dimension.jsの37行目にあります。ここでは、スタンドアロンで動作するように抽出および変更されています。
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
console.log('Width: ' + getWidth() );
console.log('Height: ' + getHeight() );すべてのブラウザーの動作は異なるため、最初に値をテストしてから、正しい値を使用する必要があります。これを行う関数は次のとおりです。
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}同様に高さについて：
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}getWidth()またはを使用して、スクリプトでこれらの両方を呼び出しますgetHeight()。ブラウザのネイティブプロパティが定義されていない場合は、が返されundefinedます。
self.innerWidth 423場合、document.documentElement.clientWidth 326およびを参照してくださいdocument.body.clientWidth 406。そのような場合の質問：どちらが正しいか、どちらを使用するか？たとえば、Googleマップのサイズを変更したいと思います。326または423の大きな違い。幅が700を超える場合は、759、735、742を参照してください（それほど大きな違いではありません）
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);およびvar windowWidth = self.innerWidth || -1;//「body」、「screen」、または「document」が原因で、オーバーフローしたhtmlのコンテンツを確認すると、「ウィンドウ」ではないことが理解できます。＃i.stack.imgur.com/6xPdH.png
getWidth()参照self.innerHeight
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;どちらも整数を返し、jQueryを必要としません。クロスブラウザ互換。
jQueryがwidth（）およびheight（）に無効な値を返すことがよくあります
matchMediaについて誰も言及しないのはなぜですか？
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}それほど多くはテストしませんでしたが、AndroidのデフォルトおよびAndroidのクロムブラウザー、デスクトップクロムでテストしたところ、これまでのところ、うまく機能しているようです。
もちろん、数値は返しませんが、ブール値を返します。一致するかどうかにかかわらず、質問に完全には一致しない可能性がありますが、それはとにかく私たちが望んでいることであり、おそらく質問の作成者が望んでいます。
W3schoolsとそのクロスブラウザーからIEの暗黒時代に戻る！
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
alert("Browser inner window width: " + w + ", height: " + h + ".");
</script>
</body>
</html>上記の関数の短いバージョンを次に示します。
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight){
return document.documentElement.clientWidth;
}
else if (document.body) {
return document.body.clientWidth;
}
return 0;
}トラビスの最新のJSの答えに対する適応ソリューション：
const getPageWidth = () => {
const bodyMax = document.body
? Math.max(document.body.scrollWidth, document.body.offsetWidth)
: 0;
const docElementMax = document.documentElement
? Math.max(
document.documentElement.scrollWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
)
: 0;
return Math.max(bodyMax, docElementMax);
};トラビスの答えへの重要な追加。ドキュメントの本文にgetWidth（）を入れて、スクロールバーの幅がカウントされることを確認する必要があります。そうでない場合は、ブラウザのスクロールバーの幅がgetWidth（）から差し引かれます。私がしたこと ;
<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>その後、任意の場所でaWidth変数を呼び出します。