获取屏幕的大小，当前网页和浏览器窗口
我怎样才能得到windowWidth ， windowHeight ， pageWidth ， pageHeight ， screenWidth ， screenHeight ， pageX ， pageY ， screenX ， screenY这将在所有主stream浏览器中工作？
如果您使用的是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;
这是你需要知道的一切：
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);
小提琴
以下是纯JavaScript （ Source ）的跨浏览器解决scheme：
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已经被提上了，但是为了响应式的网页devise和完整性，我觉得值得一提这些属性：
alert(window.screen.availWidth); alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10 ：
availWidth和availHeight – 屏幕上的可用宽度和高度（不包括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>');
您还可以获得WINDOW的宽度和高度，避免浏览器工具栏和其他东西。 它是浏览器窗口中真正的可用区域 。
为此，请使用： window.innerWidth和window.innerHeight属性（ 请参阅w3schools上的文档 ）。
在大多数情况下，这将是最好的方式，例如，显示一个完美居中的浮动模式对话框。 它允许您在窗口上计算位置，而不pipe使用浏览器的分辨率方向或窗口大小。
使用“控制台”或单击“检查”检查任何网站的当前加载页面的高度和宽度。
第一步 ：点击鼠标右键，点击“检查”，然后点击“控制台”
第2步 ：确保您的浏览器屏幕不应处于“最大化”模式。 如果浏览器屏幕处于“最大化”模式，则需要先单击最大化button（出现在右上angular或左上angular），然后取消最大化。
第3步 ：现在，在大于号（'>'）即后写下面的内容
> window.innerWidth output : your present window width in px (say 749) > window.innerHeight output : your present window height in px (say 359)
如果你需要一个真正的文档宽度和高度的防弹解决scheme（图片中的pageWidth和pageHeight ），你可能要考虑使用我的插件jQuery.documentSize 。
它只有一个目的：始终返回正确的文档大小，即使在jQuery和其他方法失败的情况下 。 尽pipe它的名字，你不一定非要使用jQuery – 它是用vanilla Javascript编写的，也可以在没有jQuery的情况下运行 。
用法：
var w = $.documentWidth(), h = $.documentHeight();
为全球document 。 对于其他文档，例如在您可以访问的embedded式iframe中，将该文档作为parameter passing：
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书签，你可以用来显示大小。 您可以轻松地将其添加到您的浏览器，每当你点击它，你会看到在你的浏览器窗口的右上angular的大小。
在这里你可以find如何使用书签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。
我开发了一个库，用于了解桌面和手机浏览器的真实视口大小，因为视口大小不一致，不能依赖于该post的所有答案（根据我所做的所有研究）： https：// github的.com / pyrsmk / W
有时您需要在调整窗口和内部内容的大小时查看宽度/高度更改。
为此，我写了一个脚本，添加了一个dynamic监视所有resize和几乎立即更新的日志框。
它添加了一个固定的位置和高z-index的有效的HTML，但足够小，所以你可以 ：
- 在实际的网站上使用它
- 用它来testing移动/响应式视图
testing：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<tags.length; i++ ) tags[i].setAttribute('style', styleString); } 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 = "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>" +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>" +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>" +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>" +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>" ; 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 );
编辑：现在样式只适用于logging器表元素 – 不是所有表 – 也是一个jQuery的解决scheme:)
在某些情况下，与响应式布局$(document).height()返回错误数据只能显示视图端口高度。 例如，当一些div＃wrapper的高度为100％时，＃wrapper可以被其中的某个块拉伸。 但它的高度仍然像视口高度。 在这种情况下，你可以使用
$('#wrapper').get(0).scrollHeight
这代表了包装的实际大小。
你可以使用屏幕对象来获得这个。
以下是它将返回的示例：
Screen { availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, pixelDepth: 24, top: 414, left: 1920, availTop: 414, availLeft: 1920 }
为了让你的screenWidthvariables，只需使用screen.width ，与screenHeight ，你只需要使用screen.height 。
要获得你的窗口的宽度和高度，它将分别是screen.availWidth或screen.availHeight 。
对于pageX和pageYvariables，请使用window.screenX or Y 请注意，这是来自左/最顶级屏幕的左/右 。 所以，如果你有两个屏幕的宽度1920那么右边屏幕左边的一个500px的窗口的X值将是2420 （1920 + 500）。 screen.width/height ，但是，显示CURRENT屏幕的宽度或高度。
要获得页面的宽度和高度，请使用jQuery的$(window).height()或$(window).width() 。
再次使用jQuery，使用$("html").offset().top和$("html").offset().left您的pageX和pageY值。
这是我的解决scheme！
// innerWidth const screen_viewport_inner = () => { let w = window, i = `inner`; if (!(`innerWidth` in window)) { i = `client`; w = document.documentElement || document.body; } return { width: w[`${i}Width`], height: w[`${i}Height`] } }; // outerWidth const screen_viewport_outer = () => { let w = window, o = `outer`; if (!(`outerWidth` in window)) { o = `client`; w = document.documentElement || document.body; } return { width: w[`${o}Width`], height: w[`${o}Height`] } }; // style const console_color = ` color: rgba(0,255,0,0.7); font-size: 1.5rem; border: 1px solid red; `; // testing const test = () => { let i_obj = screen_viewport_inner(); console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4)); let o_obj = screen_viewport_outer(); console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4)); }; // IIFE (() => { test(); })();
