戻る
viewportの設定（可変幅の例）
viewportの設定（固定幅：640pxの例）
可変幅でつくる場合、Androidではあまり難しくありません。コンテンツを可変幅でつくり、viewportの幅をdevice-width設定するだけで問題ありません。
<meta name="viewport" content="width=device-width">
しかし、iPhoneの場合これだけだと横向きにしたときに固定幅のときと同じように拡大され、意図した表示になりません。
横向きにしたときに可変幅を保つには、viewportにinitial-scale=1.0の設定を追加します。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
この設定をして横向きにした場合、横幅は可変の長さになりますが、iPhoneが自動で拡大することで表示がはみ出してしまいます。
これは次のようなviewportを指定することにより、解決ができます。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
これで意図した動作になりました。しかし、この指定ではユーザーが拡大縮小の操作を行うことができなくなってしまいます。
このようにさまざまな問題から、ベストプラクティスというものが存在しないというのが現状です。
ですので、現時点では可変コンテンツにして、ユーザーの拡大縮小を無効にするか、横向きにしたときの挙動を許容するかをケースによって選択するというのがベターではないかと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
.all{
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>