戻る
viewportの設定（固定幅：640pxの例）
viewportの設定（固定幅：640pxの例）
画像が引き延ばされるのを解決するために640pxでつくっておいて、viewportを640pxに設定するという方法もあります。全体的に320pxでつくったときよりも2倍のサイズでつくり、viewportの指定を640pxに設定します。こうすることで、横にしたとき拡大されても画像がぼけなくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:200%;
-webkit-text-size-adjust:none;
}
.all{
width:600px;
margin:0 auto;
padding:0 20px;
}
h1{
text-align:center;
margin::0 0 40px 0;
}
img{
float:left;
margin:0 20px 20px 0;
}
</style>
</head>
<body>
<div class="all">
<h1>Viewport sample</h1>
<img src="200px.jpg" alt="200px">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サイトを作る場合です。例えば横幅640pxでコンテンツを作った場合、viewportの横幅を640pxに指定すればぴったり収まるように表示されます。
<meta name="viewport" content="width=640">;
しかし、この場合iPhoneでレンダリングの処理が重くなったり、一部のAndroidで固定幅のviewportの設定が効かないことがあるため、できれば固定幅でなく、次に説明する可変幅で制作する方法のほうが無難です。
