在Chrome中进行测试。如果我动态创建画布对象，则将其放入div中，如下所示：
$('<div />').css({
width: '95%',
margin: '0px auto',
border: '1px solid red'
})
.append(
$('<canvas />')
.attr({ id: 'myCanvas' })
.css({ width: '100%' })
)
.appendTo('body');
然后在所有调整大小事件中，我尝试显示大小：
function updateCanvas() {
console.log($('#mycanvas').get(0).width);
console.log($('#mycanvas').innerWidth());
}
/* listening to whatever change it can be on the device */
var eventListen = function() {
window.addEventListener("orientationchange", eventResize, false);
window.addEventListener("resize", eventResize, false);
};
var eventResize = function() {
window.removeEventListener("orientationchange", eventResize, false);
window.removeEventListener("resize", eventResize);
window.setTimeout(function(){
/* small timeout in case of lot of resize (dragging) */
var w=innerWidth;
var h=innerHeight;
window.setTimeout(function(){
if ((innerWidth!=w) || (innerHeight!=h)) {
eventResize();
} else {
updateCanvas();
eventListen();
}
}, 100);
}, 100);
}
eventListen();
结果是不同的！纯DOM给我画布的实际大小，而
$('#mycanvas').innerWidth()给我更大的结果... 最佳答案
我认为该方案可以回答您的问题（可在Google图片上找到）
（来源：stacktrace.jp）
宽度和innerWidth之间的差异由填充引起。
编辑：更正
正如PE所指出的，这种差异是由于您所使用的width（）方法实际上是对象属性，而该属性不同于css属性。
如果未设置canvas属性，则width属性默认为300，height属性默认为150。width和height CSS属性控制元素在屏幕上显示的大小。
更多信息：
http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting.html#attr-canvas-width
关于javascript - 为什么innerWidth()与get(0).width给出不同的结果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25379477/