iPhone6対応のモバイルファーストなレスポンシブデザイン中編

前回の概念についてに続いて今回はページのひな形を作ってみます。

HTMLのひな形をつくる

まずはHTML5のひな形をつくっていきます。
よくあるHTML5の作り方だとこんな感じ。


<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
            <link rel="stylesheet" href="style.css" />
            <meta charset="UTF-8" />	
        </head>
    <body>
        <h1>TITLE</h1>
        CONTENT
    </body>
</html>

文字が小さく表示される問題

これをスマートフォンで開くととても文字が小さく表示されていまいます。

参考1-1

画面のピクセル数を表示するとこのようになります。

参考1-2

Nexus5やiPhone5などのスマートフォンにおいてWebページをデフォルトで表示した場合、画面幅を980pxと想定して表示されます。
元のページ幅が980px以上ある場合、Nexus5ではページ幅にあわせて更に縮小されます。
一方、iOSでは元のページ幅にかかわらず980pxで表示されます。

参考1-3
この振る舞いはiPhone登場当初の状況に基づきます。
当時は当然スマートフォン対応サイトというものが存在せず、ほとんどのサイトは幅800px程度の画面を持つPC向けにデザインされていました。
当時のiPhoneはディスプレイの横解像度が320pxしかなかったので、そのままではページの左上（ほとんどのWebサイトでページの左上にはロゴマーク等があるだけで、主要なコンテンツはなかった）だけが表示されてしまいます。
そこでiPhoneは幅980pxであるかのように振る舞い、それを320pxに収まるように縮小して表示することでページの全体を表示させ、興味があるコンテンツをユーザーが拡大して表示するという仕様になりました。
そのため、文字などがとても小さく表示されてしまいます。
スマートフォン対応サイトにおいては、この挙動が邪魔になるので明示的に縮小表示を行わないように指定する必要があります。

view-portを指定する。

縮小表示を行わないようにするにはview-portを指定します。
view-portとはディスプレイの幅が何ピクセルかのように振る舞うかという値です。前述のとおりデフォルトの値は980pxです。

これを以下のように明示的にdevice-widthと指定することでデバイスに応じたサイズとして振る舞う（つまり縮小処理を行わない）ようになります。


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

device-widthで指定した値は実際の物理的なディスプレイサイズではなく、ピクセルサイズを考慮したものとなるのに注意が必要です。
より高密度なディスプレイでは、低密度のディスプレイと見た目上の大きさを合わせるためにピクセル数をより少ないものとして振る舞いそれを拡大表示します。
例えば、Nexus5の場合、実際のディスプレイは幅1080pxですが、1/3である360pxとして振る舞い、それを3倍して表示します。
iPhone5の場合、幅640pxでx2なので640px/2=320px。
iPhone6の場合、幅750pxでx2なので750px/2=375pxです。

そのあとに指定してあるscaleはユーザーによる拡大縮小をどのように取り扱うかを指定します。
initial-scaleはページを開いた時の初期値、minimum-scaleはどこまで縮小を許すか、maximum-scaleはどこまで拡大を許すかです。
ここの指定はポリシーに応じますが、私はinitialは1、minimumについては幅がデバイスのサイズと一致させている関係上縮小を許さないように1、maximumはユーザーがコンテンツの一部をより詳しく見たいというニーズに適合させるため未指定（無制限）とするようにしています。
この場合、画面表示時はページが拡大縮小されずに表示され、そこから拡大はどこまでも許すが縮小は出来ないという挙動になります。

余談その１ iPhone6 Plusの解像度

iPhone6Plusでハードウェア的にはNexus5と同じ幅1080pxなので360pxで表示されるべきなのでしょうが、実際には414pxが表示されます。
これは、iPhone6Plus特有の挙動でOS自体が1242x2208pxのように振る舞い、それを1080x1920pxに縮小して表示することで対応しているために発生する問題です。
なぜこのような仕様になったのかは謎ですがOS上での問題なのでWebサイト側ではどうにもしようがないのが現実です。
作り手としては1242x2208pxでデザインする必要があり、ディスプレイの品質が悪いのだと諦めるしかありません。

余談その２ view-portに320を指定してはいけない

ちょっと昔のスマートフォン対応サイトの作り方ではview-portに320を指定するというものがありました。


<!DOCTYPE html>
<html>
	<head><title>TITLE</title>
		<link rel="stylesheet" href="style.css" />
		<meta name="viewport" content="width=320, initial-scale=1, minimum-scale=1">
		<meta charset="UTF-8" />	
	</head>
    <body>
        <h1>TITLE</h1>
        CONTENT  
        <img src="major.png" width="1200" height="1200" />
    </body>
</html>

これは初代iPhoneに合わせたサイズに指定するというもので、iPhone上ではwidth=device-widthっぽく振る舞います。
しかし、これではタブレットなどのより画面が大きなディスプレイにおいてスマートフォンのレイアウトのまま画面が拡大されて文字が異常に大きく表示され見づらくなってしまうという問題がありました。
最近のAndroid版ChromeやiPhone6、iPhone6plusの場合は320を指定してあっても無視してdevice-widthのように表示するようですが、紛らわしいのでdevice-widthを指定するべきでしょう。

CSSのひな形をつくる

-webkit-text-size-adjust: 100%を指定する

スマートフォンにはまだ問題があります。
スマートフォンでは画面を回転させた時に文字のサイズが変わってしまうものがあります。
これはよこはばを合わせてデザインすることに応じたものなのでしょうが、実際には画面の回転に応じて文字サイズが変わってしまったりしてあまり見やすくない事があります。
そこでスタイルシートに以下のように設定します。


body{
	-webkit-text-size-adjust: 100%;
}

これを指定することで画面を回転させてもページの拡大率が変わらなくなります。
ということで出来上がったひな形は以下のとおり
HTML


<!DOCTYPE html>
<html>
	<head>
		<title>TITLE</title>
		<link rel="stylesheet" href="style.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
		<meta charset="UTF-8" />	
	</head>
    <body>
        <h1>TITLE</h1>
        CONTENT  
    </body>
</html>

CSS


body{
	-webkit-text-size-adjust: 100%;
}

それでは次回は実際にこの雛形を使ってページを作っていきましょう。

iPhone6対応のモバイルファーストなレスポンシブデザイン中編 - Firespeed