Question

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

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

第二种方法是在触发onpt和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

Answer 1

window.screen.width和window.screen.height会返回包含所有小节的屏幕宽度和高度（您在屏幕上看到的内容）。因此，您必须使用window.innerHeight和{{1} }以获取视口高度和宽度

替换

window.innerWidth

与

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

调整画布大小

1 个答案: