viewportの不確実性と言ったら・・・
viewportをご存知でしょうか？
ホームページを制作している人ならば知っていると思います。
スマートフォンなどのモバイル端末のディスプレイへの表示方法を指示するオマジナイです。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>の様な記述を<head></head>の中に書いて宣言をします。
何を指示できるかというと、ディスプレイの縦や横の幅や拡大縮小の倍率、拡大縮小の許可です。
今回はこのviewportの設定方法についての紹介ではありません。
実はこれ！という設定ができないという愚痴を聞いてもらう回です。（笑）
ホームページなどの汎用性は仕様やプロトコルというルールで保証されるべきものです。
HTML5とかCSS3などがそうです。『こういう風にしようね～』といってWHATWGの様な標準化団体（民間です）などが制定します。他にJavaScriptなどもそうです。
しかし、実際のブラウザはこれらの決まりを正確に守る法的縛りはありません。準拠すれば良いだけです。各会社の戦略や思惑もありますから意図的に解釈を変えたりします。（もしかしたら本当にバグかもしれませんが）
つまりメーカーの設計都合が標準化よりも優先される場合があるということです。
IEとクロームで見え方が違う。同じブラウザでもバージョンで違う・・・などです。
話をviewportに戻しますと、モバイル系の見え方、特にサイズに対して不確実です。
同じOSでもバージョンが違うと変わります。
iOS（iPhoneやiPadなどのOS）付属のSafariはこのviewportで迷走していますね。最近のバージョンになってアンドロイドと同じ解釈になったような気がしますが、次も同じ解釈である保証はありません。
モバイル系で細かく（複数段のレスポンシブWebデザインなどを駆使して）コンテンツ表示デザインを変えるのは日本ぐらいで海外はそれほどこだわらないからかもしれません。
でも困りますよね。iOSはバージョンによってviewportの解釈が異なるので複数のバージョンに共通した正解の設定が無いのです。
仕方がないので弊社のWordPressテーマ『TAテーマ001』ではviewportの設定を自由に変更できるようにしています。つまり”制作者が決めてねっ”という逃げです。あ～気持ち悪い・・・です。技術者としてはこの手のルールに解釈なんて曖昧さがあってはいけないと思うのですが・・・
とても理科系のブログとは思えないすっきりしない結論で申し訳ないです。
viewportに関してはメーカーの不確実性に従ってまめに修正していくか、海外の人みたいに『気にしない』か・・・ですね。
つまらない答えのない愚痴にお付き合いいただきましてありがとうございました。
Follow me!
