「レスポンシブデザインviewpointの意味」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、viewpointを書かないと、iPhone6の場合、横幅が1080なので、1080で記述すると、PCサイトのように表示され文字が小さくなってしまう。
viewpointを指定することで、それが拡大されて見やすくなる。これがviewpointの設定です。今回はこのことについて記述していきたいと思います。11月30日記事
~
~
目次
#contents
~
~
----
~
*HTML5リファレンス
HTML5リファレンスには
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
と書かれている。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
このような設定の場合、横はデバイスの幅に合わせ(iOSの場合は320px)、初期値のズーム倍率は1で、ピンチしたときの拡大や縮小を禁止するminimum-scale=1とmaximum-scale=1で、ズームの操作をお互い1倍にし、禁止するということだ。
最後はあってもなくても1なのだから同じ。おそらくほとんどのスマートフォンサイトがこのように記述してある。
~
~
*色々と調べてみる
http://blog.ousaan.com/index.cgi/links/20130925.html
によると3つでいいらしい。
+meta viewpointを書かないか
+幅をピクセル数でするか
<meta name="viewport" content="width=320">
+リキッドレイアウトで変えていく場合も対応できるようにする。
<meta name="viewport" content="initial-scale=1.0">
の三つだとし、&color(red){minimum-scaleやmaximum-scaleは書かないほうが拡大縮小できるので、いざというときにユーザビリティがあがるという。}
でもトータル的なことを言えば、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
でいけるという。
~
~
*結論
+拡大縮小したいなら
<meta name="viewport" content="width=320">
か
<meta name="viewport" content="initial-scale=1.0">
+現在の仕様とグローバルスタンダードを目指すなら
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+日本人の開発者と日本のスマートフォンにまかれたいというのなら
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
~
~
*コード
以下にコードを書いておきます。色々なviewpointを書いておきました。コメントアウトを外して挙動を確認してみてください。
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!--
<meta name="viewport" content="initial-scale=1.0">
-->
<!--
<meta name="viewport" content="width=320">
-->
<!--
<meta name="viewport" content="width=device-width">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
-->
<title>viewpointテスト</title>
</head>
<body>
<div id="wrapper">
<p>160px</p>
</div>
</body>
</html>
CSS部
+reset.cssはどこからかとってきてください。
+style.cssは以下
@charset "utf-8";
/* CSS Document */
#wrapper{
width:160px;/*本当は100%とか書くがあえて記述*/
height: 500px;
background: #FFC;
}
~
~
以上
スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、viewpointを書かないと、iPhone6の場合、横幅が1080なので、1080で記述すると、PCサイトのように表示され文字が小さくなってしまう。
viewpointを指定することで、それが拡大されて見やすくなる。これがviewpointの設定です。今回はこのことについて記述していきたいと思います。11月30日記事
~
~
目次
#contents
~
~
----
~
*HTML5リファレンス
HTML5リファレンスには
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
と書かれている。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
このような設定の場合、横はデバイスの幅に合わせ(iPhone4や5の場合は320px、iPhone6の場合は375px)、初期値のズーム倍率は1で、ピンチしたときの拡大や縮小を禁止するminimum-scale=1とmaximum-scale=1で、ズームの操作をお互い1倍にし、禁止するということだ。
最後はあってもなくても1なのだから同じ。おそらくほとんどのスマートフォンサイトがこのように記述してある。
~
~
*色々と調べてみる
http://blog.ousaan.com/index.cgi/links/20130925.html
によると3つでいいらしい。
+meta viewpointを書かないか
+幅をピクセル数でするか
<meta name="viewport" content="width=320">
+リキッドレイアウトで変えていく場合も対応できるようにする。
<meta name="viewport" content="initial-scale=1.0">
の三つだとし、&color(red){minimum-scaleやmaximum-scaleは書かないほうが拡大縮小できるので、いざというときにユーザビリティがあがるという。}
でもトータル的なことを言えば、
<meta name="viewport" content="width=device-width, initial-scale=1.0">
でいけるという。
~
~
*結論
+拡大縮小したいなら
<meta name="viewport" content="width=320">
か
<meta name="viewport" content="initial-scale=1.0">
+現在の仕様とグローバルスタンダードを目指すなら
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+日本人の開発者と日本のスマートフォンにまかれたいというのなら
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
~
~
*コード
以下にコードを書いておきます。色々なviewpointを書いておきました。コメントアウトを外して挙動を確認してみてください。
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!--
<meta name="viewport" content="initial-scale=1.0">
-->
<!--
<meta name="viewport" content="width=320">
-->
<!--
<meta name="viewport" content="width=device-width">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-->
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
-->
<title>viewpointテスト</title>
</head>
<body>
<div id="wrapper">
<p>160px</p>
</div>
</body>
</html>
CSS部
+reset.cssはどこからかとってきてください。
+style.cssは以下
@charset "utf-8";
/* CSS Document */
#wrapper{
width:160px;/*本当は100%とか書くがあえて記述*/
height: 500px;
background: #FFC;
}
~
~
以上
