*

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

公開日: : Web制作, 技術 ,

Pocket

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

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

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

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

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

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

$(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'));
}
})

これをいれておけば画像の横幅は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」仕様で定義されていますので、そちらをご参照ください。

sponsored link

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

twitter-card

Twitter(ツイッター)に運用しているサイト記事の概要が表示できるTwitterカードを設定しよう

エンゲージメント率アップが狙える「Twitter Cards(ツイッターカード)」とは

記事を読む

no image

デスクトップにアナログマークを表示するアプリをつくってみた【アナログキャンペーン】

デスクトップの右上最前面に常に「アナログ」マークを表示するアプリをつくってみた。 analogは、た

記事を読む

no image

google AnalyticsでFlashをアクセス解析する

FLASHのサイトのアクセス解析をしたくても、なかなか良い方法が思いつかずに、どうしたものかとしばら

記事を読む

PHOTOSHOP用カラーパレット_JIS慣用色名byWikipedia

WikiPediaに乗っていたJIS慣用色名をPHOTOSHOP用のカラーパレット用に作成してみた。

記事を読む

sponsored link

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

SPONSORED LINK

Content Flow Chart Blackboard
【保存版】コンテンツマーケティングを行う前にチェックしたい記事16選

サイトへの集客を強化したいのだけど、広告費の予算にも限りがあるから

photo-2015-02-01-14-29-32
「いちばんやさしい新しいSEOの教本」を読めばSEOの基礎が実践できるバイブル的な一冊

SEO(検索エンジン対策)の目的とは、そもそもなんでしょうか。

Toolbox with tools. Skrewdriver, hammer, handsaw and wrench
Web担当者がオススメするサイト運用に役立つツール28選

自社のウェブサイト管理を任されている方には、おすすめのツールをご紹

Depositphotos_28048133_xs
スマホサイトをプレビュー(表示確認)する際に便利なChromeのDeveloper Toolsのエミュレーター

ウェブページを制作するときに、ページがブラウザでどのように表示

Mobility and cloud computing concept
viewportの設定はこれで大丈夫!iOSでもAndroidでもPCでも見やすくできるソースコード

スマホ用サイトを製作するにあたって検討しなければならない事項に画面

→もっと見る

  • follow us in feedly
PAGE TOP ↑