結論
全ての環境で固定するなら、これがおすすめです。(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を設定しています。シンプルです。
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と拡大縮小を認めています。
唯一、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 ってなんぞやと思いましたが、ノッチという概念が生まれたことによるセーフエリア対策のようです。
まだ効果を調べ切ってないので、こちらは追って調査します。
viewport一覧
Macで観覧
Apple
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
なし
Amazon
なし
<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">
<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">
<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">
<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">
<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">
<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">
なし
Amazon
なし
<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">
<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">
なし