ページの幅をスマートフォンの画面幅に合わせる - Webサイトのスマートフォン対応 - HTML
Webサイトをスマートフォン用に最適化して表示するために、Webページの幅をスマートフォンの画面幅にしたい場合があります。
Viewportの宣言をすることで、Webページの幅をスマートフォンの画面幅と合わせることができます。以下をHEADタグ内に記述します。
<meta name="viewport" content="width=device-width, user-scale=(拡大縮小ができるか), initial-scale=(初期状態のスケール地), maximum-scale=(最大スケール値)" />
具体例
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
コード例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes,
initial-scale=1.0, maximum-scale=5.0" />
<title>テストページ</title>
</head>
<body>
<p>スマートフォン対応ページ</p>
<body>
</html>
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
