1

我正在尝试使用 flex-boxes 设计一个网页，以使其适合任何类型的屏幕尺寸。我的主屏幕有一个画布，所以......在初始化期间调整画布大小的最佳方法是什么？

这两种方法我都试过了。我的第一种方法是使用 CSS 并为其大小设置百分比。例如，宽度=100%，高度=100%。尽管设计有效，但我发现在使用画布坐标时存在很多问题。例如，当拖动一个项目时，我的鼠标坐标放大了十倍左右。尽管我可以做到这一点，但我认为这不是最好的方法。

第二种方法是在 onload 和 onresize 事件被触发时设置固定大小。我正在做这样的事情：

window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
/*The height of the navbar.*/
navbar.height = document.getElementById('navbar').offsetHeight;

canvas = document.getElementById('canvasStage');
canvas.width = window.initWidth;
canvas.height = window.initHeight - navbar.height;

canvas.setAttribute("width", canvas.width);
canvas.setAttribute("height", canvas.height);

问题是高度似乎太大了：http: //i.imgur.com/WI0jGH2.png 我怎样才能通过这种方式完全适合屏幕？

第三种方法，但我会尽量避免它，是设置一个固定的大小，让小屏幕在页面上滚动。

谢谢！

更新：这是我的 JSFiddle： http: //i.imgur.com/NRTykLv.png

4

1 回答 1

0

window.screen.width并window.screen.height返回屏幕的宽度和高度，其中包括所有条形（您在屏幕上看到的所有内容）。因此您必须使用window.innerHeightandwindow.innerWidth才能获取视口高度和宽度

代替

window.initHeight = window.screen.height;
window.initWidth = window.screen.width;

和

window.initHeight = window.innerHeight;
window.initWidth = window.innerWidth;
于 2013-04-03T11:49:22.067 回答