Get the size of the screen, current web page and browser window

前端 未结 19 2352
面向向阳花
面向向阳花 2020-11-21 05:29

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight,

相关标签:
19条回答
  • 2020-11-21 06:10

    I wrote a small javascript bookmarklet you can use to display the size. You can easily add it to your browser and whenever you click it you will see the size in the right corner of your browser window.

    Here you find information how to use a bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

    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);
    

    Original Code

    The original code is in coffee:

    (->
      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()
    )()
    

    Basically the code is prepending a small div which updates when you resize your window.

    0 讨论(0)
  • 2020-11-21 06:12

    You can also get the WINDOW width and height, avoiding browser toolbars and other stuff. It is the real usable area in browser's window.

    To do this, use: window.innerWidth and window.innerHeight properties (see doc at w3schools).

    In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.

    0 讨论(0)
  • 2020-11-21 06:12

    Sometimes you need to see the width/height changes while resizing the window and inner content.

    For that I've written a little script that adds a log box that dynamicly monitors all the resizing and almost immediatly updates.

    It adds a valid HTML with fixed position and high z-index, but is small enough, so you can:

    • use it on an actual site
    • use it for testing mobile/responsive views


    Tested on: Chrome 40, IE11, but it is highly possible to work on other/older browsers too ... :)

      function gebID(id){ return document.getElementById(id); }
      function gebTN(tagName, parentEl){ 
         if( typeof parentEl == "undefined" ) var parentEl = document;
         return parentEl.getElementsByTagName(tagName);
      }
      function setStyleToTags(parentEl, tagName, styleString){
        var tags = gebTN(tagName, parentEl);
        for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
      }
      function testSizes(){
        gebID( 'screen.Width' ).innerHTML = screen.width;
        gebID( 'screen.Height' ).innerHTML = screen.height;
    
        gebID( 'window.Width' ).innerHTML = window.innerWidth;
        gebID( 'window.Height' ).innerHTML = window.innerHeight;
    
        gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
        gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;
    
        gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
        gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
      }
    
      var table = document.createElement('table');
      table.innerHTML = 
           "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
          +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
          +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
          +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
          +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
      ;
    
      gebTN("body")[0].appendChild( table );
    
      table.setAttribute(
         'style',
         "border: 2px solid black !important; position: fixed !important;"
         +"left: 50% !important; top: 0px !important; padding:10px !important;"
         +"width: 150px !important; font-size:18px; !important"
         +"white-space: pre !important; font-family: monospace !important;"
         +"z-index: 9999 !important;background: white !important;"
      );
      setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
      setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
    
      table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );
    
      setInterval( testSizes, 200 );
    

    EDIT: Now styles are applied only to logger table element - not to all tables - also this is a jQuery-free solution :)

    0 讨论(0)
  • 2020-11-21 06:13

    This how I managed to get the screen width in React JS Project:

    If width is equal to 1680 then return 570 else return 200

    var screenWidth = window.screen.availWidth;
    
    <Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>
    

    Screen.availWidth

    0 讨论(0)
  • 2020-11-21 06:16
    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>');
    
    0 讨论(0)
  • 2020-11-21 06:16

    Complete guide related to Screen sizes

    JavaScript

    For height:

    document.body.clientHeight  // Inner height of the HTML document body, including padding 
                                // but not the horizontal scrollbar height, border, or margin
    
    screen.height               // Device screen height (i.e. all physically visible stuff)
    screen.availHeight          // Device screen height minus the operating system taskbar (if present)
    window.innerHeight          // The current document's viewport height, minus taskbars, etc.
    window.outerHeight          // Height the current window visibly takes up on screen 
                                // (including taskbars, menus, etc.)
    

    Note: When the window is maximized this will equal screen.availHeight

    For width:

    document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
    screen.width                // Device screen width (i.e. all physically visible stuff)
    screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
    window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
    window.outerWidth           // The outer window width (including vertical scroll bar,
                                // toolbars, etc., includes padding and border but not margin)
    

    Jquery

    For height:

    $(document).height()    // Full height of the HTML page, including content you have to 
                            // scroll to see
    
    $(window).height()      // The current document's viewport height, minus taskbars, etc.
    $(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
    $(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         
    

    For width:

    $(document).width()     // The browser viewport width, minus the vertical scroll bar
    $(window).width()       // The browser viewport width (minus the vertical scroll bar)
    $(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
    $(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)
    

    Reference: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

    0 讨论(0)
提交回复
热议问题