※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、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;
    }
    


    以上