はてなブログでPCとスマホで内容を変更する！

　こちらの記事で、Webアプリをはてなブログ内に貼り付けました。
mmorley.hatenablog.com
　ところが問題発生。
　このWebアプリは、Cocos CreatorでWeb Mobile用にビルドしたのでスマホからでも見ることが出来るのですが、問題は表示サイズです。
　このブログの記事の部分の幅は560px（見出しの幅を図りました）なので、アプリの幅を550pxにしていました。
　ここ数年のスマホの画面サイズにも十分収まるので、勝手にこの幅でいけると思っていました。
　
　が、結果全然だめでした。はみ出しまくりです。
　ブログのスマホの表示幅を調べると360pxぐらいらしいです。せまい。
　スマホに合わせるとPCだと小さいしどうしよう。
　
　と思って調べたら、なんとか解決方法が見つかりました。

使用環境

　私が使用している環境です。

Mac OS X El Capitan Version 10.11.4
Cocos Creator Version 1.0.1
ブラウザ：Google Chrome Version 50.0.2661.94 (64-bit)

やり方

　どの端末でブログを見ているか、判別して内容を変更する方法がありました。

使用しているコード

　実際に使用しているコードです。これを記事の中に貼り付けています。

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {
        document.write('<div style="width:330px;height:420px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(0.6); transform-origin: left top;"></iframe></div></div>');
    }else{
        document.write('<div style="width:550px;height:700px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(1); transform-origin: left top;"></iframe></div></div>');
    }
})();
</script>

　iPhone、iPod、Androidで見た場合は、『 if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {}』の中身が実行がされます。
　それ以外、つまりPCで見ていたら『else{}』の中身が実行されます。
　スマホ向けだと、本来は下記のコードを実行したいので、

<div style="width:330px;height:420px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(0.6); transform-origin: left top;"></iframe></div></div>
</script>

　これをdocument.write('ここ');に書いています。
　PC向けのコードも同様です。
　これでPC、スマホ（iPhone、iPod、Android）、それぞれ自分が設定したサイズでWebアプリを表示できるようになりました。

PCとスマホで内容を変更するためのコード

　下記は、最初に書いたコードから、私の個人的なタグを取り払ったものです。

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {
        document.write('');
    }else{
        document.write('');
    }
})();
</script>