题 获取屏幕大小,当前网页和浏览器窗口


我怎样才能得到 windowWidthwindowHeightpageWidthpageHeightscreenWidthscreenHeightpageXpageYscreenXscreenY 哪个适用于所有主流浏览器?

screenshot describing which values are wanted


1608
2017-08-09 06:28


起源


好的图片。所有问题应该和答案应该是这样的。 - Damien Golding
pageHeight(在图片上)你可以得到:document.body.scrollHeight - befzz
看到 https://developer.mozilla.org/en-US/docs/Web/API/Window.screen 和 http://www.quirksmode.org/dom/w3c_cssom.html#screenview - rawiro
有趣: ryanve.com/lab/dimensions - Ring Ø
有用的教程 - w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh


答案:


如果您使用的是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;

1142
2017-08-09 06:39



谢谢,有没有办法获得pageX,pageY,screenX,screenY? - turtledove
jQuery方法height()似乎适用于所有元素,并返回一个数字(46)而不是像css('height')这样的字符串("46px")。 - Chris
在处理移动Safari时,遗憾的是jQuery不是这个问题的完美解决方案。请参阅第13行的注释 github.com/jquery/jquery/blob/master/src/dimensions.js - Joshua
@웃웃웃웃웃你在答案中编辑了什么?根据修订版,你根本没有编辑任何东西 - DanFromGermany
@Marco Kerwitz最糟糕的是我输入了“javascript get window width”,这个答案的内容是在Google上。一个很大的减号来自我。 - Maciej Krawczyk


这是您需要知道的一切:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

但简而言之:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

小提琴


816
2017-07-31 15:52



为什么不 g = document.body ? - a paid nerd
@apaidnerd:违反IE8等浏览器的标准不支持document.body。然而,IE9确实如此。 - Michael Mikowski
@MichaelMikowski那不是真的!甚至IE5都支持 document.body。 - Nux
@nux我的立场得到纠正,我已经确认了IE8的支持。我知道,至少我们最近定位的一个浏览器不支持document.body,我们不得不改为使用getElementsByTagName方法。但我想我错误地记录了浏览器。抱歉! - Michael Mikowski
这不短,没有解释。没有冒犯我此刻无法访问该网站。 - Adi Prasetyo


这是一个纯粹的跨浏览器解决方案 JavaScript的 (资源):

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

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

367
2018-01-30 17:44



这是更好的,因为如果你能够在加载过程中尽早调用脚本(通常是想法),那么 body element 将返回值 undefined 因为dom尚未加载。 - dgo
哈!老线程,但谢谢你!我想我是那些试图在可能的情况下至少回到IE8的旧“白痴”之一,为了令人惊讶的老家庭用户的利益,他们永远不会停止使用XP,直到他们的机器着火。我厌倦了提问而不是得到答案,只用“停止支持IE8 !!”进行投票。作为评论。再次感谢!这解决了我在一个纯粹的javascript照片缩放我做的问题。它在IE8上有点慢,但现在至少它有效! :-) - Randy


获取可用屏幕尺寸的非jQuery方法。 window.screen.width/height 已经提出,但为了响应网页设计和完整性,我认为值得提到这些属性:

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

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

availWidth 和 availHeight  - 可用的宽度和高度   屏幕(不包括OS任务栏等)。


77
2018-06-20 10:06



与宽度screen.height相同 - 在Android Chrome浏览器显示除以像素比率:( - Darius.V
window.screen.availHeight 似乎采用全屏模式,以便正常的屏幕模式强制滚动(在Firefox和Chrome中测试)。 - Suzana
@Suzana_K然后使用 window.screen.height 代替。 - Vallentin


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

window.innerWidth, window.innerHeight

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


48
2018-04-22 07:29



这应该是大量赞成的答案。比目前接受的答案更有用的答案,它也不依赖于jQuery。 - developerbmw
不幸, window.innerWidth 和 window.innerHeight 无法考虑滚动条的大小。如果存在滚动条,则这些方法几乎在所有桌面浏览器中都会返回错误的窗口大小结果。看到 stackoverflow.com/a/31655549/508355 - hashchange


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

17
2018-02-11 04:25





您还可以获得WINDOW的宽度和高度,避免使用浏览器工具栏和其他内容。它是 浏览器窗口中的实际可用区域

为此,请使用: window.innerWidth  和 window.innerHeight 属性(在w3schools看到doc)。

在大多数情况下,它将是显示完美居中的浮动模态对话框的最佳方式。它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小。


15
2017-08-21 10:44



根据w3schools的说法,ie8和ie7都不支持。此外,您必须注意何时链接到w3schools。看到 meta.stackexchange.com/questions/87678/... - thecarpy


使用查看任何网站当前加载页面的高度和宽度 “安慰” 或点击后 “检查”

步骤1:单击鼠标右键并单击“检查”,然后单击“控制台”

第2步:确保您的浏览器屏幕不应处于“最大化”模式。如果浏览器屏幕处于“最大化”模式,则需要先单击最大化按钮(出现在右上角或左上角)并取消最大化。

第3步:现在,在大于号('>')之后写下以下即

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

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

12
2017-07-09 04:22



为什么这不是选定的答案? - Iulian Onofrei
@IulianOnofrei因为它没有完全回答原来的一组问题。笑话,对我来说这是正确的答案。 - rob
innerWidth和innerHeight仅在视口比例为1时才准确。这是默认值,但可以使用css转换无意中更改它。 - Victor Stoddard
“window.innerWidth”而不是“screen.width”对我有用,可以确定用户浏览器的大小 - 谢谢! - Kevin Pajak


如果你需要一个真正的防弹解决方案的文件宽度和高度( pageWidth 和 pageHeight 在图片中),你可能想考虑使用我的插件, jQuery.documentSize

它只有一个目的:即使在jQuery和其他方法的情况下,也始终返回正确的文档大小 失败。尽管它的名字,你不一定要使用jQuery - 它是用vanilla Javascript编写的 没有jQuery工作也是。

用法:

var w = $.documentWidth(),
    h = $.documentHeight();

为了全球 document。对于其他文件,例如在您有权访问的嵌入式iframe中,将文档作为参数传递:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

更新:现在也用于窗口尺寸

从版本1.1.0开始,jQuery.documentSize也处理窗口维度。

这是必要的,因为

jQuery.documentSize提供 $.windowWidth() 和 $.windowHeight(),这解决了这些问题。有关更多信息,请查看 文件


8
2018-03-04 22:30



VM2859:1未捕获的DOMException:阻止具有原点的帧“本地主机:12999";从访问跨源框架。(...)有没有办法超过这个? - fizmhd
您无法访问来自其他域的iframe,这违反了 同源政策。查看 这个答案。 - hashchange


我写了一个小的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,它会在你调整窗口大小时更新。


8
2018-03-31 09:25