nicepaper @ ウィキ
nicepaper @ ウィキ

スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、viewpointを書かないと、iPhone6の場合、横幅が1080なので、1080で記述すると、PCサイトのように表示され文字が小さくなってしまう。 viewpointを指定することで、それが拡大されて見やすくなる。これがviewpointの設定です。今回はこのことについて記述していきたいと思います。11月30日記事

目次




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つでいいらしい。

  1. meta viewpointを書かないか
  2. 幅をピクセル数でするか 
    <meta name="viewport" content="width=320">
  3. リキッドレイアウトで変えていく場合も対応できるようにする。 
    <meta name="viewport" content="initial-scale=1.0">
    の三つだとし、 minimum-scaleやmaximum-scaleは書かないほうが拡大縮小できるので、いざというときにユーザビリティがあがるという。 でもトータル的なことを言えば、 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    でいけるという。

結論

  1. 拡大縮小したいなら 
    <meta name="viewport" content="width=320">
か
<meta name="viewport" content="initial-scale=1.0">
  2. 現在の仕様とグローバルスタンダードを目指すなら 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. 日本人の開発者と日本のスマートフォンにまかれたいというのなら 
    <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部

  1. reset.cssはどこからかとってきてください。
  2. style.cssは以下 
    @charset "utf-8";
/* CSS Document */

#wrapper{
	width:160px;/*本当は100%とか書くがあえて記述*/
	height: 500px;
	background: #FFC;
}


    以上
「レスポンシブデザインviewpointの意味」をウィキ内検索
最終更新：2015年11月30日 22:56