javascript - 変更 - 画面サイズ ウィンドウサイズ 違い




画面のサイズ、現在のWebページ、ブラウザウィンドウを取得する (12)

どのようにすべての主要なブラウザで動作するwindowWidthwindowHeightpageWidthpageHeightscreenWidthscreenHeightpageXpageYscreenXscreenYscreenYできますか?


ここに私の解決策です!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();


jQueryを使用している場合、jQueryメソッドを使用してウィンドウまたはドキュメントのサイズを取得できます。

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

画面サイズについては、次の方法でscreenオブジェクトを使用することができます。

screen.height;
screen.width;

「コンソール」を使用して、または「検査」をクリックして、現在のページの高さと幅を確認することができます。

ステップ1 :マウスの右ボタンをクリックし、「Inspect」をクリックし、次に「console」をクリックします。

ステップ2 :ブラウザの画面が「最大化」モードでないことを確認します。 ブラウザの画面が「最大化」モードの場合は、最初に最大化ボタン(右上または左上の角にある)をクリックして最大化を解除する必要があります。

ステップ3 :大なり記号( '>')の後に次のように書く

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

ここに私の解決策があります。 最初に、クッキーを扱ういくつかのユーティリティオブジェクトがあります

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

それで、あなたは何かをすることができます..

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

このようにして、サーバサイドの言語を使ってクッキーを読んで、ユーザ画面の正確なイメージサイズを取得することができます。


しかし、レスポンシブなスクリーンについて話をするときに、何らかの理由でjQueryを使用してそれを処理したい場合は、

window.innerWidth, window.innerHeight

正確な測定値が得られます。 スクロールバーの余分なスペースがなくても、スペースを調整することについて心配する必要はありません:)


また、ブラウザのツールバーや他のものを避けて、ウィンドウの幅と高さを取得することもできます。 これは、 ブラウザのウィンドウで実際に使用可能な領域です。

これを行うには、 window.innerHeightプロパティとwindow.innerHeightプロパティを使用します( w3schools.com/jsref/prop_win_innerheight.asp window.innerHeightw3schools.com/jsref/prop_win_innerheight.asp )。

ほとんどの場合、完全に中心の浮動モーダルダイアログを表示するのが最良の方法です。 ブラウザを使用している解像度の向きやウィンドウのサイズに関係なく、ウィンドウ上の位置を計算できます。


ウィンドウコンテキストなしで、 すべてのブラウザでネイティブのjavascriptウィンドウAPIを単独で安全に使用できるようになりました。

構文はいくぶんかなり明確です!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

すべてのブラウザとデバイスで正確な結果を得るには、結果にdevicePixelRatioを掛けなければなりません。

WindowプロパティのdevicePixelRatioは、現在のディスプレイデバイスのCSSピクセルの解像度に対する物理ピクセルの解像度の比率を返します。 この値は、1つの物理ピクセルのサイズに対する1つのCSSピクセルのサイズであるピクセルサイズの比率として解釈することもできます。 簡単に言えば、これはブラウザに、実際のピクセル数を使って1つのCSSピクセルを描画する必要があるかどうかを示します。

これは、標準ディスプレイでのレンダリングと、より多くのスクリーンピクセルを使用して同じオブジェクトを描画するHiDPIまたはRetinaディスプレイのレンダリングの違いに対処する場合に役立ち、より鮮明な画像になります。

この値が変更されたときに通知する方法はありません(たとえば、ユーザーがウィンドウを異なるピクセル密度のディスプレイにドラッグした場合など)。 ピクセル密度の変化を検出するためのコールバックやイベントがないため、devicePixelRatioの値が定期的に変更されているかどうかを確認する必要があります。 あまり頻繁にやりすぎないと、パフォーマンスに影響を与えます。

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio


サイズを表示するために使用できる小さなjavascriptブックマークレットを作成しました。 ブラウザに簡単に追加できます。クリックすると、ブラウザウィンドウの右隅にサイズが表示されます。

ブックマークレットの使用方法については、 https://en.wikipedia.org/wiki/Bookmarklet

ブックマークレット

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

オリジナルコード

元のコードはコーヒーに入っています:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

基本的には、ウィンドウのサイズを変更するときに更新される小さなdivの前にコードがあります。


以下は、純粋なJavaScriptw3schools.com/jsref/prop_win_innerheight.asp )を備えたクロスブラウザソリューションです。

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

利用可能な画面の寸法を得るための非jQueryの方法。 window.screen.width/heightは既に設定されていますが、敏感なウェブデザインと完全性のために、私はその属性について言及する価値があると思います:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10

availWidthavailHeight - 画面上で利用可能な幅と高さ(OSのタスクバーなどを除く)。


私はビューポートのサイズがデバイス全体で一貫性がなく、その投稿のすべての回答に頼ることができないため、デスクトップやモバイルブラウザの実際のビューポートサイズを知るためのライブラリを開発しました(これについて私が行ったすべての調査によると): https://github.com/pyrsmk/W


function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');




cross-browser