誰でもすぐデキる一番簡単なiPhone対応サイトの作り方
シンプルなウェブページであれば、ヘッダー部分でmetaタグのviewportを指定すれば、簡易的なiPhoneやAndroidなどのスマホに対応したページにすることできます。
そこで、JavaScriptとPHPの二通りの方法でUserAgentを判別し、iPhoneやAndroid(タブレットは除く)であれば、viewportを書き出すソースを書いてみます。
自分で指定したUserAgentの端末のみviewportが書き出されますので、例えばiPadなどにはviewportは書き出されず、シンプルな一種の振り分けとなります。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> var d = window.document; if(navigator.userAgent.indexOf('iPhone') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('iPod') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('Android') > -1 && navigator.userAgent.indexOf('Mobile') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); }else if(navigator.userAgent.indexOf('Windows Phone') > -1){ d.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />'); } </script> |
PHP
|
1 2 3 4 5 6 7 |
<?php $ua = $_SERVER["HTTP_USER_AGENT"]; if (mb_ereg("iPhone|iPod|Android.*Mobile|Windows.*Phone|blackberry|webOS", $ua)) { $viewport = "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0\" />"; echo $viewport; } ?> |
どちらもの間の上の方に書くといいと思います。
今回はあくまでviewportの書き出しでしたが、UserAgentの判定によるページ振り分けは色々と応用方法があると思います。
スポンサーリンク
スポンサーリンク
最近のコメント