の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

      2015/01/15

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズに合わせて表示する方法を紹介します。

方法

viewportを使います。具体的にはHEAD内に次の内容を記述します。

<meta name = "viewport" content="width = device-width"/>

iPhone表示結果

記述前

2014-09-18_sample1

記述後

2014-09-18_sample2

まとめ

viewportをうまく使えばワンソースでスマホもPCも適切に表示することができます。

また、次のようなプロパティを指定することができます。

  • width:標準980。範囲200-10000。今回のように画面サイズに合わせる場合はdevice-widthを使う。
  • initial-scale:初回読み込み時の表示倍率。
  • user-scalable:ズーム動作の可否。no指定でズーム機能オフ。標準はyes。

1つのコンテンツあまり手をかけずにPCとスマホで表示されたいときは試してみてはいかがでしょうか。

 - JS,PHP,CSS , ,

336-280

  関連記事

段組
【CSS】段組レイアウトの基礎・サンプル付き

CSSによる段組レイアウトの基礎とサンプルです。 段組レイアウトサンプル サンプ …

no image
【JavaScript】getElementByIdでゲットした値を数値にするにはparseIntを使う

JavaScriptの個人的なメモです。 getElementByIdでゲットし …

文字化けしたファイルがWebサーバーから削除できないときの対処方法

文字化けしているファイルが、Webサーバーから削除できない場合の対処方法を紹介し …

ulタグ、liタグを使った横並びメニューの作成方法

はじめに ヘッダーなどに使う横並びのメニュー。 HTMLの構造的にもulタグ、l …

no image
CSSに関する超個人的なメモ

CSSに関する個人的なメモです。 何回も確認したり、よく使うコードをメモしておき …