の まとめ

デジタルガジェットレビュー、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

  関連記事

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …

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

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

【CSS】CSSで作るプルダウン/ドロップダウンメニュー【初心者】

CSS初心者でも簡単に実装できるプルダウンメニュー(ドロップダウンメニュー)を、 …

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

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

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

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