如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?


当前回答

这是我的解决方案!

//内部宽度常量screen_viewport_inner=()=>{设w=窗口,i=“内部”;if(!(窗口中的`innerWidth`)){i=“客户端”;w=document.documentElement | | document.body;}返回{width:w[`${i}宽度`],高度:w[`${i}高度`]}};//外侧宽度常量screen_viewport_outer=()=>{设w=窗口,o=“外部”;if(!(窗口中的`outerWidth`)){o=“客户端”;w=document.documentElement | | document.body;}返回{width:w[`${o}宽度`],高度:w[`${o}高度`]}};//样式常量console_color=`颜色:rgba(0255,0,0.7);字体大小:1.5rem;边框:1px纯红色;`;//测试常量测试=()=>{让i_obj=screen_viewport_inner();console.log(`%c screen_viewport_inner=\n`,console_color,JSON.stringfy(i_obj,null,4));让o_obj=screen_viewport_out();console.log(`%c screen_viewport_outer=\n`,console_color,JSON.stringify(o_obj,null,4));};//生命(() => {测试();})();

其他回答

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

这有您需要知道的一切:获取视口/窗口大小

但简而言之:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

不停摆弄

请停止编辑此答案。它已经被不同的人编辑了22次,以符合他们的代码格式偏好。也有人指出,如果你只想瞄准现代浏览器,这是不需要的——如果是的话,你只需要以下内容:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

但是当我们谈论响应屏幕时,如果出于某种原因我们想使用jQuery处理它,

window.innerWidth, window.innerHeight

给出正确的测量值。即使它删除了滚动条的额外空间,我们也不必担心调整空间:)

与屏幕尺寸相关的完整指南

JavaScript

高度:

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

注意:当窗口最大化时,这将等于screen.availHeight

宽度:

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)

滑动分页

高度:

$(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.                         

宽度:

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

参考:https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

这就是我如何在React JS项目中获得屏幕宽度的方法:

如果宽度等于1680,则返回570,否则返回200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

屏幕有效宽度