以跨浏览器的方式查找视口的确切高度和宽度(无 Prototype/jQuery)

IT技术 javascript cross-browser viewport
2021-01-28 00:04:36

我试图找到浏览器视口的确切高度和宽度,但我怀疑 Mozilla 或 IE 给了我错误的数字。这是我的身高方法:

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

我还没有开始宽度,但我猜它会是类似的。

有没有更正确的方法来获取这些信息?理想情况下,我希望该解决方案也适用于 Safari/Chrome/其他浏览器。

5个回答

你可以试试这个:

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

但是,甚至不可能在所有浏览器中都获得视口信息(例如,在 quirks 模式下的 IE6)。但是上面的脚本应该做得很好:-)

被一个错误困了大约 5 个小时,结果 jquery 在 FF/Chrome 中执行$(document).width()or时不会返回相同的值$(window).width()window.innerWidth效果很好。
2021-03-20 00:04:36
@Dee2000 我要说的是,或者更确切地说,我想说的是,当您在常规页面上进行测量时,您会获得浏览器视口大小,但是当您从 iframe 内部进行测量时,您会得到该 iframe 的文档大小,而不是浏览器视口。不确定我是否解释得很好,让我知道我是否应该重新制定。
2021-03-23 00:04:36
@GarciaWebDev 在一个简单的页面上,您“认为”获得了“浏览器”视口大小,但事实并非如此。您将获得您所在/所在的 HTML 页面的视口大小。无论该页面是“顶部”还是 iframe 或嵌套嵌套 iframe,它始终是您所在/所在 HTML 页面的视口大小。如果您想知道顶部(或父)页面的视口大小,只要您的 iframe 是“友好的”(不是跨域),那么您可以简单地替换“窗口”。与“父母”。或“顶”。到您测试的每个值(例如 parent.innerWidth)。
2021-03-26 00:04:36
这似乎不适用于 iframe,而是返回 iframe 大小。有什么线索吗?
2021-04-06 00:04:36
@GarciaWebDev 所以你说的是它工作正常;-)
2021-04-07 00:04:36

您可以使用较短的版本:

<script type="text/javascript">
<!--
function getViewportSize(){
    var e = window;
    var a = 'inner';
    if (!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>

我一直只使用document.documentElement.clientHeight/ clientWidth我认为在这种情况下您不需要 OR 条件。

同意document.documentElement.clientWidth是纯JS的方法。responsejs.com/labs/dimensions
2021-03-22 00:04:36
你有一个错字,应该是:'document.documentElement'。这在 quircksmode 中不起作用...在 FF 上它给出了整个文档的高度,而不仅仅是“clientHeight”,而在 IE 上它给出了“0”。
2021-03-29 00:04:36
同意。来自:quirksmode.org/mobile/viewports.html - “document.documentElement实际上是<html>元素”。document.documentElement.clientWidth并且clientHeight仍然给出视口的尺寸,而不是<html>元素的尺寸。(这是一个特殊的规则仅适用于此元素,仅适用于此属性对。在所有其他情况下,使用元素的实际宽度。)”因此它应该在 IE6 标准模式及以上的“所有情况下”工作。这些值不包括滚动条(与window.innerWidth不同innerHeight)。
2021-03-29 00:04:36
它不能伤害。一旦找到有效值,它们的余数将不会被评估
2021-04-08 00:04:36

试试这个..

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>
谢谢!你刚刚救了我的命!:)
2021-03-22 00:04:36

使用此提示:http : //www.appelsiini.net/projects/viewport或该代码:http : //updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using -jquery/

我试图在不使用 jQuery 的情况下做到这一点。我想我应该更清楚这一点。
2021-04-11 00:04:36