の まとめ

デジタルガジェットレビュー、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による段組レイアウトの基礎とサンプルです。 段組レイアウトサンプル サンプ …

【CSS】div align=”center”を使わずにmargin autoでセンタリングする方法

divの入れ子でページ内センタリングせずに、左右のmarginをautoにするこ …

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

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

SNS
SNSのシェアボタンをまとめて作る方法

Twitter、Facebook、はてブ、Google+でシェアするためのボタン …

no image
【JavaScript】functionでリロードする方法

用途 ボタンをクリックしたらリロードしたい、ある一定時間が経過したらWebページ …