戻る
viewportの設定（固定幅：320pxの例）
viewportの設定（固定幅：320pxの例）
viewportの幅は、コンテンツの幅や横向きにした時の挙動などを考えて設定する必要があります。どのような指定にするのがよいか、実際の挙動をみながら説明します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
.all{
width:300px;
margin:0 auto;
padding:0 10px;
}
h1{
text-align:center;
margin::0 0 20px 0;
}
img{
float:left;
margin:0 10px 10px 0;
}
</style>
</head>
<body>
<div class="all">
<h1>Viewport sample</h1>
<img src="100px.jpg" alt="100px">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
</div>
</body>
</html>
まずは、固定幅でWebサイトを作る場合です。例えば横幅320pxでコンテンツを作った場合、viewportの横幅を320pxに指定すればぴったり収まるように表示されます。
<meta name="viewport" content="width=320">
この場合問題になるのは、iPhoneで横向きにしたときに拡大されるということです。拡大されると、画像が引き伸ばされて表示されるなどの問題が生じます。
また、Androidでは横にしたときに拡大はされず、横にスペースができてしまいます。
Androidは機種によってviewportの挙動が変わる場合がありますが、今回はエミュレータでの挙動を基準に考えます。
