みかづきブログ・カスタム

基本的にはちょちょいのほいです。

GAFAのviewportの書き方を調べて、最強のviewportを検討する 💻

f:id:kimizuka:20200602095703p:plain




結論

全ての環境で固定するなら、これがおすすめです。(Appleの書き方)

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

もしくは、viewport-fit=coverを外して、こう書くかですね。(Googleの書き方)

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

しかし、今後は環境によって動的に書き換えるのが主流になる可能性あります。


viewportは環境ごとに設定すべきか

基本的にviewportはPCでは不要なものなので、スマホでのアクセスのときのみ付けるという方針は、ありな気がしました。
ただ、GoogleもAmazonもフロントではなく、サーバサイドで書き換えているので、スタティックなページをつくるときはフロントで書き換えるかどうかは悩ましいところです。
それぞれの特徴をさくっと比較してみましょう。

Apple

PCだろうが、スマホだろうが、タブレットだろうが、全環境で同じviewportを設定しています。シンプルです。

Google

PCとiPad Proではviewportを設定していません。 iPad Proはデフォルトで「デスクトップ用Webサイトを表示」がONになっていることが原因かと思われます。
また、iOSとAndroidでもviewportの設定が異なり、iOSではinitial-scale=1.0。Androidではminimum-scale=1.0が設定されています。

Amazon

こちらもPCとiPad Proではviewportを設定していません。
更にスマホとタブレットでviewportの設定を出し分けています。
スマホではmaximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=noと、徹底的に拡大縮小を禁止していますが、タブレットではmaximum-scale=5, minimum-scale=0.5と拡大縮小を認めています。

Facebook

唯一、PCとスマホでURLを分けています。
PC版にもviewportを書いていますが、他の環境で同じ設定が見つからず、PCのための設定だと思われるんですが、これを評価する環境があるのかが謎です。僕はPC版の確認をMacBook Proで行いましたが、タブレットPCやサーフェイスのときに効いてくるのかもしれないです。未調査なので分かりませんが。
スマホに関しても、iOSとAndroidで微妙な差があります。iOSは1ではなく1.0001という値を入れているのは、調べてみたところiOS9のバグ回避の技みたいです。

https://developer.apple.com/forums/thread/13510

shrink-to-fit=noを書けば解決する気がするんですが、念のため1.0001にしているということなんでしょうか。
更には、iPhoneSEとiPhoneXでもviewportをだし分けていて、iPhoneXのときのみviewport-fit=coverを付けています。
これは画面サイズではなく、ノッチがあるかないかで判断してるんですかね。細かい調整を入れてますね。


viewport-fit=coverをつけるべきか

そもそもviewport-fit=cover ってなんぞやと思いましたが、ノッチという概念が生まれたことによるセーフエリア対策のようです。

webkit.org

developer.mozilla.org

まだ効果を調べ切ってないので、こちらは追って調査します。


viewport一覧

Macで観覧

Apple

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Google

なし

Amazon

なし

Facebook

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,shrink-to-fit=no" />

iPhoneSE(320px)で観覧

Apple

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

Google

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

Amazon

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

Facebook(https://m.facebook.com にリダイレクト)

<meta name="viewport" content="user-scalable=no,initial-scale=1.0001,maximum-scale=1.0001">

iPhoneX(375px)で観覧

Apple

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

Google

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

Amazon

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

Facebook(https://m.facebook.com にリダイレクト)

<meta name="viewport" content="user-scalable=no,initial-scale=1.0001,maximum-scale=1.0001,viewport-fit=cover">

Pixel2(411px)で観覧

Apple

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

Google

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

Amazon

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

Facebook(https://m.facebook.com にリダイレクト)

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">

iPad(768px)で観覧

Apple

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

Google

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

Amazon

<meta name="viewport" content="maximum-scale=5, minimum-scale=0.5, shrink-to-fit=no">

Facebook

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

iPad Pro(834px)で観覧

Apple

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

Google

なし

Amazon

なし

Facebook

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,shrink-to-fit=no">

Nexus10(800px)で観覧

Apple

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

Google

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

Amazon

<meta name="viewport" content="maximum-scale=5, minimum-scale=0.5, shrink-to-fit=no">

Facebook

なし