javascript $(window).width() 属性在 Internet Explorer 中不起作用

Posted 2023-03-06

【中文标题】javascript $(window).width() 属性在 Internet Explorer 中不起作用

【英文标题】：javascript $(window).width() property not working in in Internet Explorer

【发布时间】：2013-08-12 02:30:30

【问题描述】：

我以绝对位置关注 Div：

<div id="target" style="height: 300px; position: absolute; top: 275px;"></div>

我正在做的是使用javascript计算屏幕水平分辨率，然后使用获得的宽度，我正在计算我的“目标”的宽度和左侧位置div如下：

var windowWidth = $(window).width();
var targetWidth = windowWidth * 0.7;
var targetLeftPos = windowWidth * (15 / 100);
$('#target').css( 'width': targetWidth );
$('#target').css( 'left': targetLeftPos );

这段代码在所有浏览器中都能完美运行，但在 IE 中这段代码无法运行，导致目标 div 没有宽度和左侧位置样式，导致我的所有设计为被破坏。

有什么方法可以检测客户端浏览器，如果检测到的浏览器是 IE，则执行备用代码。

请告诉我应该如何检测客户端浏览器以及应该为 IE 执行哪些替代代码。

提前致谢。

【参考方案1】：

我发现了问题...外部 jquery 插件 stickyscroll.js 导致了问题。它正在停止页面上所有 js 的执行（仅在 IE 中发生）。当我删除它时，上面的代码对 IE 也一直准确......

【参考方案2】：

而不是$(window).width，使用

var windowWidth = window.innerWidth;

【讨论】：

$window.width 应该是 $(window).width();。我改了

var windowWidth = document.body.clientWidth;我也试过这个，但它也不适用于 IE。

你可以试试 document.documentElement.clientWidth

在 IE 中我进入开发者工具并进入脚本选项卡并开始调试，然后刷新页面 js 工作正常.. 现在 div 重新定位为我想要的准确。但这不是我的问题的解决方案，因为这是手动方法。认为的问题是IE没有自动执行js