个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在为动画制作 Canvas 网页。奇怪的是，每次我通过双击 html 文件启动网页时， Canvas 几乎总是大小不正确。我之前发过类似的问题:Canvas sizing incorrectly on loading但没有想要的答案。
经过大量调试后，我发现是 window.innerWidth 给我带来了这样的麻烦。 window.innerWidth 每次通过双击 html 文件启动页面并导致 Canvas 大小不正确时返回 0(有趣的是 Canvas 大小不完全为 0，而是一个非常小的对象以堆叠呈现)，但在重新加载页面(Ctrl+R)后，问题不再发生。我正在使用 jQuery 加载页面，这是我的代码:
html:
<body>
<canvas id="main_canvas"></canvas>
</body>
js:
$(document).ready(function() {
var SCREEN_WIDTH = window.innerWidth-10,
SCREEN_HEIGHT = window.innerHeight-10;
if (window.innerWidth === 0) { alert("wtf? width = 0?");}
var canvas = $('canvas')[0],
context;
init(); // use $(window).load(init) does not fix the problem
function init() {
if (canvas.getContext) {
context = canvas.getContext('2d');
animate(); // draw stuff
}
else {
alert('Your browser does not support html5 canvas');
}
}
});
正如您在这里看到的，我已经在使用 $(docuemnt).ready(function()) 来确保加载内容，但是来自链接 http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/作者建议在加载 HTML 文档且 DOM 准备就绪时就已经执行文档就绪事件，即使所有图形尚未加载也是如此。
另一方面，$(window).load(function()) 在整个页面(包括所有框架、对象和图像)完全加载后执行。因此，涉及图像或其他页面内容的函数应该放在窗口或内容标签本身的加载事件中。但是即使我使用这个问题也没有解决。
也许 js 文件在加载之前要求窗口的宽度，但我找不到可行的解决方案。有人可以帮忙吗？
最佳答案
使用在窗口调整大小时触发的事件监听器。这样一来，您就不必费力地寻找窗口何时完全初始化。它还会让你减少对状态的依赖，这是一个很好的奖励。
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
windowX = window.innerWidth;
windowY = window.innerHeight;
}
关于javascript - window.innerWidth = 0?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11721064/
25
4
0
这个问题已经有答案了: HTML5 Canvas 100% Width Height of Viewport? (7 个回答) 已关闭 5 年前。 在使用 window.innerWidth 和 wi
我正在探索 JavaScript 中的内置对象，并编写了以下内容以查看它们在 Chrome 中的返回值。 console.log(window.innerWidth); console.log(win
我正在尝试使用 jQuery UI slider 小部件创建一个图像库。我的代码要求我找到无序列表的内部宽度。在 Firefox、IE 和 Opera 中，我得到的值为 2193px，但在 Chrom
我在下面有一段代码，它试图通过设备的 innerWidth 来确定某人是从移动设备还是台式机访问我的网站。但是，当我尝试从我的手机获取 innerWidth 时，它显示我的手机宽度是 980px？不过
var x = window.innerWidth; if (window.innerWidth CoffeeTea WaterMilk 我的宽度是 1366px 但上面的代码执行并将 li
我需要以像素为单位获取三星 Galaxy S10 设备的 innerWidth，我尝试使用谷歌搜索 - 但没有帮助。如何根据制造商的数据计算设备的宽度？如果您知道 Galaxy S10 的像素宽度，我
我正在开发一个简单的聚合物 Dart 应用程序，并且有一个包含图像标签的聚合物标签 宽度设置为100％，以便在用户调整浏览器大小时调整图像大小。 我会定期更改{{i
正在关注 var w = (window.innerWidth - 100px); 不工作。 有人可以告诉我它是如何工作的吗？ 最佳答案 .innerWidth 返回一个以像素为单位的数字，因此您只需
我正在构建一个响应式网站，但不想只是隐藏较小屏幕的元素，我想完全删除它们以减少加载时间。 到目前为止我已经完成了这个工作 if (window.innerWidth < 768) { $('.
我是 JavaScript 的新手，想制作一个简单的“hello world”程序，根据屏幕宽度更改文本。如果窗口(索引文件)的宽度为 400 像素或更多，则显示文本，如果窗口更小，则 400 像素显
我正在尝试更改元素的宽度。 脚本成功获取屏幕宽度... let x = window.innerWidth || e.clientWidth || g.clientWidth; ...然后减半...
我有一个根据屏幕大小显示不同内容的脚本，它看起来像这样: if ((window.innerWidth 750)) { //Do something } 谁能帮帮我？ 最佳答案 当使用 bool
这个问题在这里已经有了答案: How to get the browser viewport dimensions? (17 个答案) 关闭 8 年前。 我正在尝试计算视口(viewport)的宽度
当我实时调整浏览器大小时，我需要获取浏览器的宽度。到目前为止，我已经找到了一个给出宽度但不是实时的解决方案。该值仅在我刷新网页后更新。我如何在调整浏览器大小时获取值。 我的方法 render() {
我正在使用 bootstrap 编写一个响应式网站，我只想要一个与屏幕实际大小相同的元素。 每当我执行 height/width: 100% 时，浏览器都会给我一个滚动条，因为它会将我的视口(view
我试图让下拉菜单在屏幕尺寸小于 500 像素时显示。稍后，我将删除导航栏，以便此菜单在小型设备上取而代之。 我觉得代码不错，警报确实触发了，但菜单没有显示。 TLDR:需要在屏幕尺寸小于 500px
if(window.innerWidth) { return window.innerWidth; } return $(window).width(); 我正在使用上面的代码来查找网页的可用
当我运行代码时: public onResize(event: Event) { console.log(event.target.innerWidth); //--solution-
我正在为动画制作 Canvas 网页。奇怪的是，每次我通过双击 html 文件启动网页时， Canvas 几乎总是大小不正确。我之前发过类似的问题:Canvas sizing incorrectly
我有两个独立的组件，一个用于移动设备，另一个用于桌面。一次只能显示一个组件，具体取决于用户浏览器窗口的宽度。这是我的浓缩版: let innerWidth Inner Width:
我是一名优秀的程序员,十分优秀！