【日記】viewPortについて考えてみよう

【日記】viewPortについて考えてみよう

先日仕事でviewportがどういうものか聞かれ、
効果は説明できたのですが具体的な話を簡潔にできなかったので
今回はviewportについて考えようと思います。

自分も完全には理解してないので
間違いなどあれば指摘していただけるとありがたいです。

あと、だいたい経験を元に話します。
真偽はある程度調べましたが
飽くまで『らしい』程度に話しているところもあります。



ではまずviewportとはなにか。
そもそも私のブログがWeb関係を専門に扱っているわけではないので、
ゲームの記事を目的に見ている方々にとっては
何だそれはという話でしょう。


viewportとはhtmlのmetaタグに存在するname属性の一つです。
この時点でなんじゃらほいという方は
恐らく今回の記事は読んでも楽しくありません。
ご了承ください。

因みに私のブログに設定してあるviewportは
meta name="viewport" content="width=device-width"

これはviewportの幅を使用するデバイスの解像度に合わせます。
という設定です。



viewportの機能を一言で表すと
『Webサイトを携帯端末に適当させること』です。

厳密には低解像度ディスプレイに対応させる機能ですが
昨今そんなのは携帯端末しかないので限定的でいいでしょう。
XPの時代は幅640~1024pxが主流でしたし
98や2000なんてもっと小さい320*240とか。

ちょっと待ってください、
スマートフォンのスペック見ると
ディスプレイ解像度は1920*1080って書いてあるんですけど?
という疑問には後で言及しますので置いておいてください。



ではまずviewportを設定しない場合のお話。
viewportが携帯端末に対する設定で使われるということは
PC上でしか使わないWebサイトでは使う必要がありません。

どういうことか。

例えば幅1024px向けのサイトを作ったとして
昨今のPC解像度の主流は1280px以上です。

この場合一画面内にサイトは表示されるので
これといって対応を考える必要はありません。


ではスマートフォンはどうか、
の前にスペック上の疑問点を解消しておきます。

スマートフォンの実解像度は
殆どの機種で1980*1080あります。
ただこれは画面を鮮明に見せるためであり、
大きさの足りない画像を転送しても
PCほど拡大時の荒れは見られません(限度はあります)。

ではWebサイトもその解像度で見ているのかというとこれは別で、
スマートフォン向けブラウザの基本解像度は
殆どの機種で幅320pxほどです。
※iPhone7plusで414pxほどらしいです。


ただし1024px幅のサイトを表示したら
1/3程度しか見えないのではないか、ということこれも違い
スマートフォンは『Webサイトの幅を自動で画面内に収めます』


【日記】viewPortについて考えてみよう

つまりうちのブログをviewportの設定無しで見ると
こんな感じに要素を縮小してスマートフォンの画面内に収めます。

これがviewportなしでの挙動。
PCでのレイアウトは変わらず、
スマートフォンはPCレイアウトを縮小して表示します。



昨今のWebサイト構築における主流はレスポンシブデザインです。
レスポンシブとは『Responsive:反応する』の通り
画面の大きさに反応するWebデザインです。

つまりPC上でもブラウザのウインドウ幅を縮小したら
スマートフォンのレイアウトに変わるというあれ。

このviewportを設定することにより
スマートフォン側で初めて
レスポンシブデザインを使うことができるのです。


先程お話した通り、viewportがない場合、
スマートフォンはPCレイアウトを自動的に縮小します。
これはレスポンシブ対応をしてても同じ。
折角ウインドウに合わせたデザインをしても
スマートフォンちゃんは

「い~や、オレはPCのまま映すね」

と意地を張ってそのまま表示してくれます。
viewportを設定すると素直になります。



ではviewportを使うとどれぐらいの幅になるか
というと先程お話した通り320px辺りが主流です。


ここで一つ疑問に思うのは
ある要素が幅1000pxのサイトを
viewportを設定してスマートフォンに表示した場合
今度こそ320px以上は表示されないのか?

というとviewportの書き方にもよりますが
やっぱり縮小されます。

これはスマートフォンがWebサイト内の
最大の幅の要素を基準に表示しているからです。

まぁこの場合は別の問題が出てきますが
それはまた後ほど。



まとめると、PCで表示させる場合はそのまま、
携帯で使う時にviewportを設定しておけば良いんだよ。
というお話。


……………………………………。
という簡単なお話であれば誰も迷いはしないのですけどね。

PCとスマートフォンに限った話で言えば殆どこれでいいのですが
これだけだと対応不十分になる奴がいます。
ずばりiPadに代表されるPad系。

これは経験の話で全端末でそうなるかはわかりませんが
Pad系はwidthの設定をdvice-wdithに設定しても
はみ出たり表示の崩れる場合があります。

何故かはわかりませんが多分Padのブラウザのスケーリングの問題。

Pad系の幅はスマートフォンと同じで適宜縮小され、
大体960pxぐらいを主流としています。

device-widthを設定すると
viewportは自動でこの幅に合わせてくれるのですが
Padは何故か上手くいかないことがあります。



というわけで今度は各属性のお話。
viewportはmetaタグのname属性に該当するので

name属性はviewport。
他にcontent属性でwidthとinitial-scaleを設定できます。
スマートフォン特有のピッチ変更が可能かどうか
というuser-scaleの設定もありますが置いておきましょう。


widthはそのまま『横幅』です。
px単位で設定するのですがwidth=1000pxではなく
width=1000のように単位無しで記述します。

pxをつけると反応しなくなるので注意。

私のブログに書いてあるdevice-widthは
最初に述べた通りデバイスの幅に合わせるということです。


initial-scaleの方は『拡大率』と思ってください。
initial-scale=1とした場合device-widthと同じ意味になります。

するとinitial-scale=1とdevice-widthを
同時に設定する必要はないのか? と思われますが
これは対応してないブラウザに対する表記もあるので
一概に必要ないとは言えません。

基本的に全ブラウザがwidthの値に対応しているので
viewportはwidthさえ設定しておけば事足りますが
それで何か問題が起きるなら
initial-scaleが必要になるかもしれません。


一応appleなどのソースを見ると
meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover
となっていて両方設定してあります。

私これを見てviewport-fitというのを初めて知りましたが
どうもiPhoneX向けの記述らしいです。


因みにamazoneやtwitterはレスポンシブ対応ではなく
端末による内容の切り替えを行っています。

amazonはIE8以下を切り捨てたら
通販サイトとして成り立たないのでわかります。
twitterはそもそも機能がPC版と違うからでしょうか。

appleは多分自社製品がCSS3に対応しないわけがないからでしょうね。



話を戻して繰り返しますが
Pad系はdevice-widthをちゃんと認識しないことがあります。

そこで必要となるのがwidthの値指定です。
先程の通りPad系デバイスのブラウザの幅は960px程です。
このためwidthの値を1000以上にすれば
殆どのPadで正常に表示してくれます。

経験上これで指定しても
CSSで「position:fixed」を設定していると
表示が崩れるなどありますがそれはまた次回話します。


さてここで問題となるはPadに対応したことによる
他の端末での表示です。

PCの解像度は1980px、そこにviewportの1000を設定したら
表示が拡大されるのではないか、という心配があります。

これはwidthで設定した値より解像度が大きければ
viewportは無視されるという機能があるので問題ありません。


対しスマートフォンでは元々320pxしかないものを
1000pxまで拡大してしまうので
レスポンシブ対応はできず表示が縮小されます。

つまりPad系とスマートフォンを同時に上手く表示させるには
viewportの設定だけだと難しいのですね。

そこでWeb業界ではif文を使った条件分岐により
viewportの設定を分けています。

iPhoneやAndroidであればwidth=device-width
それ以外であればwidth=1000というように。


ここまで読んで来て分かる通り
私のブログはPad系の表示に対応させていません。

ただしこれには語弊がありますが、
Pad系でdevice-widthが反応しないのは
『初期表示時点』の話です。

レイアウトが崩れていた場合
ダブルタップすることで表示を合わせてくれます。
(htmlとcssがちゃんとしていた場合)


つまり私のブログは
Padで開いた直後は崩れるかもしれないけど
ダブルタップすればちゃんと表示される(はず)
ということです。

まぁ仕事上ではそういうわけにもいかないので
ちゃんとPad側にも対応させる必要がありますけどね。



今回の話をまとめますと、
・viewportは携帯端末に適応するための設定
・ただしPad系とスマートフォンでは表示が異なる
・そのためviewportは条件分岐で2つあると良い

これがviewportを使う時の考え方です。

しかし身も蓋もない話をしますが
これぐらいGoogleで調べれば色んなサイトが出てきます。

ではそれよりも大事な本題とはなにか。
それは

『viewportの設定をしてレイアウトが崩れる場合の対処法』

です。つまりここまで前提です。
そして私としてもここからが一番書きたかったことです。

という前振りをして、次回に続きます。
関連記事
スポンサーサイト




▼ この記事へのコメント
Name :
Title :
Comments :