の まとめ

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

  関連記事

解像度
Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法

商標登録するイメージファイルを作る必要がありjpgファイルにdpiを指定すること …

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

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

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

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

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

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …