スポンサーリンク

誰でもすぐデキる一番簡単なiPhone対応サイトの作り方

2013 年 2 月 5 日 コメントをどうぞ コメント

シンプルなウェブページであれば、ヘッダー部分でmetaタグのviewportを指定すれば、簡易的なiPhoneやAndroidなどのスマホに対応したページにすることできます。
そこで、JavaScriptとPHPの二通りの方法でUserAgentを判別し、iPhoneやAndroid(タブレットは除く)であれば、viewportを書き出すソースを書いてみます。
自分で指定したUserAgentの端末のみviewportが書き出されますので、例えばiPadなどにはviewportは書き出されず、シンプルな一種の振り分けとなります。

JavaScript
<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
<?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;
}
?>

どちらも<head></head>の間の上の方に書くといいと思います。
今回はあくまでviewportの書き出しでしたが、UserAgentの判定によるページ振り分けは色々と応用方法があると思います。

スポンサーリンク
スポンサーリンク

あわせて読みたい関連記事

カテゴリー: ウェブサイト構築 タグ: , , ,
  1. コメントはまだありません。
  1. トラックバックはまだありません。

CAPTCHA


スパム防止 * Time limit is exhausted. Please reload CAPTCHA.