Amr*_*rhy 172 html javascript css jquery
我正在尝试编写一个JavaScript函数来获取当前的浏览器宽度.
我找到了这个:
javascript:alert(document.body.offsetWidth);
但它的问题是,如果身体宽度为100%则失败.
还有其他更好的功能或解决方法吗？
cha*_*aos 304
这是一个痛苦的屁股.我建议跳过废话并使用jQuery,这可以让你做到$(window).width().
Tra*_*vis 117
我的原始答案是在2009年写的.虽然它仍然有效,但我想在2017年更新它.浏览器仍然可以表现不同.我相信jQuery团队在维护跨浏览器一致性方面做得很好.但是,没有必要包含整个库.在jQuery源代码中,相关部分位于dimensions.js的第37行.在这里,它被提取和修改为独立工作:
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
console.log('Width: ' + getWidth() );
console.log('Height: ' + getHeight() );由于所有浏览器的行为都不同,因此您需要先测试值,然后使用正确的值.这是一个为您完成此功能的功能:
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
和高度类似:
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
使用getWidth()或在脚本中调用这两个getHeight().如果没有定义浏览器的本机属性,它将返回undefined.
Bra*_*ood 48
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;
两者都返回整数,不需要jQuery.跨浏览器兼容.
我经常发现jQuery为width()和height()返回无效值
Dar*_*s.V 14
为什么没有人提到matchMedia？
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
没有测试那么多,但测试与Android默认和Android铬浏览器,桌面铬,到目前为止看起来它运作良好.
当然它不返回数值,但返回布尔值 - 如果匹配与否,那么可能不完全符合问题,但这是我们想要的,可能是问题的作者想要的.
小智 7
从W3schools及其跨浏览器回到IE的黑暗时代!
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
alert("Browser inner window width: " + w + ", height: " + h + ".");
</script>
</body>
</html>
小智 6
以下是上述功能的简短版本:
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight){
return document.documentElement.clientWidth;
}
else if (document.body) {
return document.body.clientWidth;
}
return 0;
}