HTML5 ゲームを iframe に埋め込んで、iPad や iPhone などのモバイル デバイスのブラウザに表示しようとしています。
iPad で直接アクセスすると、問題なく動作します。
ただし、iframe を使用してそれらを埋め込むと、ゲームに触れて離すと、ゲームが一時停止します。
この iframe の動作を停止して、本来の動作をさせる方法はありますか?
触るのをやめて、空っぽだと思って一時停止すると、集中力が失われているようですか?
例
以下の 2 つのサンプル リンクをエミュレータで試すと、問題が発生します。
iPhone / iPad エミュレーター: https://app.io/safari
Direct Game Link (ゲーム作品): http://static.tresensa.com/madcab/index.html?dst=A0000
埋め込みゲーム リンク (ゲームが動作しない): http://drttrd.com/testIframe.php
私が使用しているコード(基本)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
</head>
<body>
<div>
<iframe src="http://static.tresensa.com/madcab/index.html?dst=A0000" frameborder="0" scrolling="no" width="960" height="536"></iframe>
</div>
</body>
</html>
私が試したこと
インタラクション タイプを変更する CSS スタイル
<div style="overflow:auto;-webkit-overflow-scrolling:touch;">
<iframe src="" height="" height=""></iframe>
</div>
デフォルトを防ぐJS
<script>
document.ontouchmove = function(e) {
e.preventDefault();
};
</script>
...どちらも役に立たなかった