如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?
当前回答
这就是我如何在React JS项目中获得屏幕宽度的方法:
如果宽度等于1680,则返回570,否则返回200
var screenWidth = window.screen.availWidth;
<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a </Label>
屏幕有效宽度
其他回答
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>');
您可以使用jQuery获取窗口或文档的大小:
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
对于屏幕大小,可以使用屏幕对象:
window.screen.height;
window.screen.width;
图形答案:(............)
如果您需要一个真正防弹的文档宽度和高度解决方案(图片中的pageWidth和pageHeight),您可能需要考虑使用我的插件jQuery.documentSize。
它只有一个目的:即使在jQuery和其他方法失败的情况下,也始终返回正确的文档大小。尽管有jQuery的名字,但您不必使用它——它是用普通的Javascript编写的,也可以在没有jQuery的情况下使用。
用法:
var w = $.documentWidth(),
h = $.documentHeight();
用于全局文档。对于其他文档,例如在您有权访问的嵌入式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()来解决这些问题。有关更多信息,请查看文档。
但是当我们谈论响应屏幕时,如果出于某种原因我们想使用jQuery处理它,
window.innerWidth, window.innerHeight
给出正确的测量值。即使它删除了滚动条的额外空间,我们也不必担心调整空间:)
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- React不会加载本地图像
- 我如何在HTML中创建一个泪滴?
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- 使用jQuery获取第二个孩子
- JavaScript变量声明在循环外还是循环内?
- 我怎么能强迫一个长字符串没有任何空白被包装?