获取屏幕大小,当前网页和浏览器窗口
tur*_*ove 1927 javascript jquery layout cross-browser
我怎样才能得到windowWidth,windowHeight,pageWidth,pageHeight,screenWidth,screenHeight,pageX,pageY,screenX,screenY将在所有主要浏览器工作？
Ank*_*wal 1331
如果您使用的是jQuery,则可以使用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;
- @Marco Kerwitz最糟糕的是我输入了"javascript get window width",这个答案的内容是在Google上.一个很大的减号来自我. (9认同)
- @웃웃웃웃웃你在答案中编辑了什么？根据修订版,你根本没有编辑任何东西 (8认同)
- 在处理移动Safari时,遗憾的是jQuery不是这个问题的完美解决方案.请参阅https://github.com/jquery/jquery/blob/master/src/dimensions.js上第13行的说明 (6认同)
- 现在我想起来了……哇。这个答案已有10年历史了。甚至在 IE11 之前。堆栈交换网络上应该有某种老化功能。这将在几年内摧毁整个平台。像这样受欢迎的答案需要很长时间才能让社区对其他答案进行投票。我们需要一个“折旧”标签或其他东西 (5认同)
- jQuery方法height()似乎适用于所有元素,并返回一个数字(`46`)而不是像css('height')(`"46px"`)这样的字符串. (2认同)
- @AdamArold 在不了解事实的情况下停止评论。最初的问题专门要求 JQuery 具体答案，此后已被版主多次编辑。还有其他关于普通 javascript 解决方案的答案，如果您不喜欢 JQuery，请选择它们。 (2认同)
- jQuery是可选的OP *** DID ASK ***。忍者编辑原始问题以排除该问题的人都是这里的错，而不是使用世俗的javascript库给出合法答案的人。 (2认同)
- 在 2020 年，询问如何使用 JQuery 做某事真的非常非常烦人......更多的开发人员不使用它而不是使用它。我们可以做更好的人。我们可以做得更好。 (2认同)
sid*_*son 925
这是您需要知道的一切:
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
但简而言之:
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);
- 为什么不``g = document.body`？ (56认同)
- @apaidnerd:违反IE8等浏览器的标准不支持document.body.但是,IE9确实如此. (51认同)
- @MichaelMikowski那不是真的!甚至IE5也支持`document.body`. (44认同)
- @nux我的立场得到纠正,我已经确认了IE8的支持.我知道,至少我们最近定位的一个浏览器不支持document.body,我们不得不改为使用getElementsByTagName方法.但我想我误读了浏览器.抱歉! (31认同)
- 我只想非常简单地说一个字母的变量名称永远不会有用. (29认同)
con*_*ile 459
这是一个纯JavaScript的跨浏览器解决方案(来源):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
- 哈!老线程,但谢谢你!我想我是那些试图在可能的情况下至少回到IE8的旧"白痴"之一,为了令人惊讶的老家庭用户的利益,他们永远不会停止使用XP,直到他们的机器着火.我厌倦了提问而不是得到答案,只用"停止支持IE8 !!"进行投票.作为评论.再次感谢!这解决了我在一个纯粹的javascript照片缩放我的问题.它在IE8上有点慢,但现在至少它有效!:-) (13认同)
- 这样更好,因为如果你能够在加载过程中足够早地调用脚本(通常是想法),那么`body元素`将返回一个'undefined`值,因为dom尚未加载. (9认同)
Dan*_* W. 89
获取可用屏幕尺寸的非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任务栏等).
- `window.screen.availHeight`似乎采用全屏模式,以便正常的屏幕模式强制滚动(在Firefox和Chrome中测试). (2认同)
小智 63
但是当我们讨论响应式屏幕时,如果我们想要出于某种原因使用jQuery来处理它,
window.innerWidth, window.innerHeight
给出正确的测量.即使它删除了滚动条的额外空间,我们也不必担心调整空间:)
- 不幸的是,`window.innerWidth`和`window.innerHeight`无法考虑滚动条的大小.如果存在滚动条,则这些方法在几乎所有桌面浏览器中都会返回错误的窗口大小结果.请参见http://stackoverflow.com/a/31655549/508355 (5认同)
- 这应该是大量赞成的答案.比当前接受的答案更有用的答案,它也不依赖于jQuery. (2认同)
Kam*_*ski 40
完整的 2020
我很惊讶这个问题有大约 10 年，而且到目前为止似乎还没有人给出完整的答案（有 10 个值）。所以我仔细分析了OP问题（特别是图片）并有一些评论
- 坐标系的中心
(0,0)在视口中（没有条形和主边框的浏览器窗口）左上角和轴指向右和向下（在 OP 图片上标记的内容），因此 的值pageX, pageY, screenX, screenY必须为负（如果页面很小，则为零）或不滚动） - 对于
screenHeight/WidthOP 想要计算屏幕高度/宽度，包括系统菜单栏（例如在 MacOs 中）-这就是我们不使用的原因.availWidth/Height（不计算它） - 对于
windowWidth/HeightOP 不想计算滚动条的大小，所以我们使用.clientWidth/Height - 在
screenY-在下面解决方案，我们添加到左上角的浏览器角落的位置（window.screenY）其菜单/ tabls / URL栏）的高度。但是，如果下载底部栏出现在浏览器中和/或如果开发者控制台在页面底部打开，则很难计算该值 - 在这种情况下，该值将在以下解决方案中增加该栏/控制台高度的大小。可能无法读取条形/控制台高度的值以进行校正（没有一些技巧，例如要求用户在测量前关闭该条形/控制台......） pageWidth- 如果 pageWidth 小于 windowWidth 我们需要手动计算<body>子元素的大小来获得这个值（我们contentWidth在下面的解决方案中进行示例计算- 但通常这对于这种情况可能很困难）- 为简单起见，我假设
<body>margin=0 - 如果不是，那么在计算pageWidth/Height和pageX/Y
function sizes() {
let contentWidth = [...document.body.children].reduce(
(a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
- document.body.getBoundingClientRect().x;
return {
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight,
pageWidth: Math.min(document.body.scrollWidth, contentWidth),
pageHeight: document.body.scrollHeight,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
pageX: document.body.getBoundingClientRect().x,
pageY: document.body.getBoundingClientRect().y,
screenX: -window.screenX,
screenY: -window.screenY - (window.outerHeight-window.innerHeight),
}
}
// TEST
function show() {
console.log(sizes());
}body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }<div class="box">
CAUTION: stackoverflow snippet gives wrong values for screenX-Y,
but if you copy this code to your page directly the values will be right<br>
<button onclick="show()" style="">CALC</button>
</div>我在 MacOs High Sierra 上的 Chrome 83.0、Safari 13.1、Firefox 77.0 和 Edge 83.0 上对其进行了测试
小智 18
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>');
ser*_*er2 18
您还可以获得WINDOW的宽度和高度,避免使用浏览器工具栏和其他内容.它是浏览器窗口中真正可用的区域.
要执行此操作,请使用:
window.innerWidth 和 window.innerHeight属性(请参阅w3schools上的doc).
在大多数情况下,它将是显示完美居中的浮动模态对话框的最佳方式.它允许您计算窗口上的位置,无论使用浏览器的分辨率方向或窗口大小.
- 根据w3schools的说法,ie8和ie7都不支持.此外,您必须注意何时链接到w3schools.见http://meta.stackexchange.com/questions/87678/discouraging-w3schools-as-a-resource (2认同)
sol*_*... 18
使用"控制台"或单击"检查"后检查任何网站当前加载页面的高度和宽度.
步骤1:单击鼠标右键并单击"检查",然后单击"控制台"
第2步:确保您的浏览器屏幕不应处于"最大化"模式.如果浏览器屏幕处于"最大化"模式,则需要先单击最大化按钮(出现在右上角或左上角)并取消最大化.
第3步:现在,在大于号('>')之后写下以下即ie
> window.innerWidth
output : your present window width in px (say 749)
> window.innerHeight
output : your present window height in px (say 359)
小智 11
与屏幕尺寸相关的完整指南
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
has*_*nge 10
如果您需要一个真正的防弹解决方案来处理文档的宽度和高度(图中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也处理窗口维度.
这是必要的,因为
$( window ).height()是越野车在IOS,以被无用的点$( window ).width()并且在移动设备$( window ).height()上不可靠,因为它们无法处理移动缩放的影响.
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,它在你调整窗口大小时会更新.
随着引进globalThis的ES2020，你可以用这样的属性。
对于屏幕尺寸：
globalThis.screen.availWidth
globalThis.screen.availHeight
对于窗口大小
globalThis.outerWidth
globalThis.outerHeight
对于偏移：
globalThis.pageXOffset
globalThis.pageYOffset
...＆ 很快。
globalThis.screen.availWidth
globalThis.screen.availHeight
在某些与响应式布局相关的情况下,$(document).height()可能会返回仅显示视口高度的错误数据.例如,当某个div#wrapper的高度为100%时,#wrapper可以被其中的某个块拉伸.但它的高度仍然像视口高度.在这种情况下你可能会使用
$('#wrapper').get(0).scrollHeight
这表示包装器的实际大小.
| 归档时间： |
|
| 查看次数： |
1438803 次 |
| 最近记录： |