制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングHTMLスマートフォンとタブレットでviewportを振り分ける[js]

スマートフォンとタブレットでviewportを振り分ける[js]

2014年02月07日javascript HTML iPhone 
スマートフォンとタブレットでviewportを振り分ける[js]記事のアイキャッチ画像

スマートフォンとタブレットでviewportを振り分けるjsを紹介します。といってもただ条件分岐しているだけですが。

まえがき

皆さん、いきなりですがスマホサイトってどうやって作りますか?
KoToRiは「viewport」をこんな感じで指定して

<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">

横幅640pxで作成されたデザインデータを用意してそのままコーディングします!

「viewport」に「initial-scale=0.5」を指定することで横幅640pxでコーディングしたものを50%の大きさで表示することができます。

つまり横幅320px!ちょうどiPhoneのディスプレイの幅のサイズで表示されるわけですね。
この手法だと画像もボケないし楽だし結構ベーシックなやり方だと思います。

ただ、この「viewport」はiPadにも効きます。PCサイトに「initial-scale=0.5」を指定してiPhone用の表示としている場合、iPadで閲覧するとめちゃくちゃ小さくなってしまいます。まさに先日KoToRiはこの状況に陥りました。

「しようがない。phpで振り分けよう。」とか思っていたら

拡張子がhtmlだった

既に公開しているページで拡張子を変えてしまうのは気が進みませんでした。ていうか許可が下りませんでした笑

2時間くらい悩んだ末、やっと答えにたどり着きました。

jsで振り分ければいいじゃん

ホントなんで2時間も悩んでたのか分からない。
ということで同じ人が出現しないよう記事にしておきます。

スマートフォンとタブレットでviewportを振り分ける

このコードをhtmlの</head>より前の「viewport」を記述したいところに書きます。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	    document.write('<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">');
	}else{
	    document.write('<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=yes">');
	}
</script>

一応解説入れますと
「iPhone,iPod,Android」の場合は「initial-scale=0.5」の指定
それ以外(つまりタブレット)の場合は「initial-scale=1」の指定
をそれぞれ書き出すスクリプトになっています。
「viewport」の値は各々変更してください。

はい!これだけです笑
難しいことは何一つありません。

まとめ

KoToRiは直ぐにjsで振り分けるという発想が出てこなかったです。
phpはWordPressですごく使用しているので慣れ親しんでいるのです。
しかしjsは、どっかからライブラリを持ってきてちょっとカスタマイズして使ったりしている程度でphpに比べると修行が圧倒的に足りません。

今回はこの差が顕著に出ました。

これからはjsという選択肢もあるのだと頭に刻み込みます。
何の決意表明だよって感じですが笑

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント