windowWidth,
windowHeight,
pageWidth,
pageHeight,
screenWidth,
screenHeight,
pageX,
pageY,
screenX,
screenY` を全ての主要ブラウザで動作するようにするにはどうしたらいいですか?
.
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;
これには必要なものがすべて揃っています。[ビューポート/ウィンドウサイズの取得][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);
[フィドル][2]
[1]: https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript [2]: http://fiddle.jshell.net/L6uPV/show/
この回答を編集するのはやめてください。好みのコードフォーマットに合わせるために、さまざまな人によって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);
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>');