これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ – てっく煮ブログ

Pocket

スマホを視野に入れたコーディングの場合は、下記の参考サイトに書いてある、viewport設定(metaタグ)と、cssの記述をしましょう(HTML5 & CSS3)

参考サイトだと、initial-scale=1.0 以上に記述してある物がありますが、入れすぎると表示がおかしくなる場合がありますので、
initial-scale=1.0 ぐらいまでにしておく場合があります。

[html]
<meta name="viewport" content="width=device-width,initial-scale=1.0">
[/html]


「-webkit-text-size-adjust: 100%;」は、iPhoneを横向きにした時の、文字の大きさを維持する指定です。
(指定しない通常時では、文字が大きく拡大してしまう)

[css]
body {
-webkit-text-size-adjust: 100%;
}
[/css]

■参考サイト

これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ – てっく煮ブログ

 

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください