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

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

6xPdH.png

#1楼

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

简而言之:

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

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

const width = window.innerWidth || document.documentElement.clientWidth ||

document.body.clientWidth,

const height = window.innerHeight|| document.documentElement.clientHeight||

document.body.clientHeight;

console.log(width, height);

#2楼

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

alert(window.screen.availWidth);

alert(window.screen.availHeight);

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

#3楼

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

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

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

#4楼

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

var width = window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var height = window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

#5楼

有时您需要在调整窗口和内部内容的大小时看到宽度/高度的变化。

为此,我编写了一个小脚本,其中添加了一个对话框,该对话框可以动态监视所有调整大小并立即进行更新。

它添加了具有固定位置和高z-index的有效HTML,但是足够小,因此您可以 :

在实际站点上使用

用它来测试移动/响应视图

经过测试:Chrome 40,IE11,但也很可能也可以在其他/旧版浏览器上工作... :)

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

}

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 =

"

SOURCEWIDTHxHEIGHT"

+"

screenx"

+"

windowx"

+"

document
.documentElementx"

+"

document.bodyx"

;

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

编辑:现在样式仅适用于记录器表元素-不适用于所有表-这也是一个无jQuery的解决方案:)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值