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

如何获取在所有主流浏览器中都可以使用的windowWidthwindowHeightpageWidthpageHeightscreenWidthscreenHeightpageXpageYscreenXscreenY

屏幕截图描述了所需的值

答案

您可以使用 jQuery 获取窗口或文档的大小:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

对于屏幕尺寸,可以使用screen对象:

window.screen.height;
window.screen.width;

这包含您需要了解的所有信息: 获取视口 / 窗口大小

简而言之:

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

小提琴

请停止编辑此答案。现在已经由不同的人对其进行了 21 次编辑,以匹配其代码格式首选项。还指出了,如果您只想定位现代浏览器,则不需要这样做 - 如果是这样,则只需要以下内容:

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

console.log(width, height);

这是使用纯JavaScript的跨浏览器解决方案( ):

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 任务栏等)。

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

window.innerWidth, window.innerHeight

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

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

要使用“控制台”或单击“检查”后, 检查任何网站当前加载页面的高度和宽度。

步骤 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)

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

为此,请使用: window.innerWidthwindow.innerHeight属性( 请参阅 w3schools 的文档 )。

例如,在大多数情况下,这是显示完美居中浮动模式对话框的最佳方法。无论使用哪种分辨率方向或窗口大小,都可以使用它来计算窗口的位置。

如果您需要一个真正的防弹解决方案来解决文档的宽度和高度(图片中的pageWidthpageHeight ),则可以考虑使用我的插件jQuery.documentSize

它只有一个目的:始终返回正确的文档大小,即使在 jQuery 和其他方法失败的情况下也是如此。尽管有它的名字,但您不必一定要使用 jQuery –它是用普通 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() ,它们可以解决这些问题。有关更多信息,请查阅文档

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