如何使用高DPI设备呈现WebGL内容？

Question

设置WebGL以在每英寸高点显示器(例如macbook视网膜或像素chromebook)上呈现所有原生像素的正确方法是什么？

Answer 1

对于WebGL来说,它相对简单.

var desiredCSSWidth = 400;
var desiredCSSHeight = 300;
var devicePixelRatio = window.devicePixelRatio || 1;

canvas.width  = desiredCSSWidth  * devicePixelRatio;
canvas.height = desiredCSSHeight * devicePixelRatio;

canvas.style.width  = desiredCSSWidth  + "px";
canvas.style.height = desiredCSSHeight + "px";

见http://www.khronos.org/webgl/wiki/HandlingHighDPI

遵循这些规则的一致性测试.具体而言,不允许浏览器更改WebGL画布的画布的后备存储大小.

对于常规2D画布来说,它不那么简单,但这不是问题.