viewportの設定はこれで大丈夫！iOSでもAndroidでもPCでも見やすくできるソースコード

Tweet

Pocket

スマホ用サイトを製作するにあたって検討しなければならない事項に画面の幅に合わせる必要があると思います。iOS系のRatinaディスプレイ対応にする必要があったり、さまざまな画面サイズがあるAndroidに対応するには、METAタグにviewportというタグを設定して見やすい画面にしていきます。

実際スマホで見やすい画面とはどんな画面か。

スマホで見やすい画面は、以下のような条件が必要になるかと思います。

• テキストが読みやすい。
• 画像がきれい。
• 細かいところを見ようと思ったときにも拡大できる。
• コンテンツの横幅とスマホ画面の横幅があっている。

jQueryを使って外部ファイル化したviewportのソースコード

そこでそれらの条件をクリアできるようなものということで以下のようなものを考えてみました。jQueryを使って外部ファイルに以下の内容を記述します。

[html]$(function(){
if (navigator.userAgent.indexOf(‘iPhone’) > 0){
$("head").append($(‘<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=yes" />\n’));

}else if(navigator.userAgent.indexOf(‘Android’) > 0){
$("head").append($(‘<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,user-scalable=yes" />\n’));
}
})[/html]

これをいれておけば画像の横幅は640pxでつくれば、どのスマホで見ても画像がきれいに表示されているはずです。

ソースコードの解説

iPhone用ソースコード

width=device-width

コンテンツの横幅をデバイスの横幅にあわせる

initial-scale=0.5

Retinaディスプレイに対応するため初期表示の拡大率を0.5倍にする

minimum-scale=0.5

Retinaディスプレイに対応するため拡大率の最小値を0.5倍にする

maximum-scale=0.5

Retinaディスプレイに対応するため拡大率の最大値を0.5倍にする

user-scalable=yes

ユーザー側でズームができるようにする

Android用ソースコード

target-densitydpi=device-dpi,width=device-width

Android用にコンテンツの横幅をデバイスの横幅にあわせる

initial-scale=1.0

初期表示の拡大率を1倍にする

user-scalable=yes

ユーザー側でズームができるようにする

まとめ

スマートフォンサイトを制作する際に、一番最初でつまづいてしまうviewportの設定ですが、この設定を覚えてからは、かなり簡単に作れるようになりました。viewportについては、W3C「CSS Device Adaptation」仕様で定義されていますので、そちらをご参照ください。

この記事を書いた人

arkth

食品系ECサイトの運用をしているWEBマスター。CMSのテンプレート開発からSEO、サイト分析、集客など、一通りのことを、まるっとやっています。

最近書いた記事

• SEO2015年2月12日【保存版】コンテンツマーケティングを行う前にチェックしたい記事16選
• おすすめ本2015年2月1日「いちばんやさしい新しいSEOの教本」を読めばSEOの基礎が実践できるバイブル的な一冊
• Webサイト運用2014年10月5日Web担当者がオススメするサイト運用に役立つツール28選
• スマートフォン向け2014年9月15日スマホサイトをプレビュー（表示確認）する際に便利なChromeのDeveloper Toolsのエミュレーター