HTML 5 Canvas问题与iPhone有关

Question

附有两个截图。一个来自Android手机（Nexus 5，但结果在其他设备上类似），另一个来自iPhone（6，但在其他iPhone上也类似）。

问题似乎是画布 - 出于某种原因 - 并未停留在其父级div的iPhone界限内。

陌生人仍然使用Chrome的开发者工具，当我切换到查看设备工具栏时，我使用的任何手机都可以正常工作 - 但仅限于生产，即代码实际发布时，做似乎似乎出错了。

为了澄清这个问题，这里是一个草图，在代码下面

会发生什么（在Android设备上会发生）

=================
|    --------   |
|    |Canvas|   |
|    --------   |
=================

iPhone上会发生什么

=================
|Parent Div     |
|    -----------------   
|    |Canvas         |
|    |               |
|    |               |
|    -----------------
|               |
=================

请注意，在iphone上，不仅两个元素都变得更高，而且画布的宽度溢出＆＃39;在父div之外

代码

HTML

<div id = "parentDiv">
   <!-- canvas gets added here via JS -->
</div>

JS

  canvas.style = "position: relative";
  canvas.setSize(750, 450);
  canvas.style = "width: 100%"
  canvas.id = "theMainImage";
  $("#parentDiv").appendChild(canvas);

任何人都有任何线索为什么iOS似乎反对画布？

提前感谢任何问题！

Chrome浏览器上的

p.s（mac或其他）它可以正常工作。仅在移动设备上，这似乎是一个问题。

iPhone截图

Android屏幕截图