詳しい仕様変更はSafari 10.0 - Developer - Appleを閲覧してください。
ここではviewportの検証を行います。
検証端末:iPhone 6 plus
※user-scalable=noは効かなくなったようです。
参考:disable viewport zooming iOS 10 safari?
パターン1
<meta name="viewport" content="width=320">
- window.innerWidth = 320
- htmlのwidth = 320
パターン2
<meta name="viewport" content="width=320, maximum-scale=1">
- window.innerWidth = 414
- htmlのwidth = 320
???
viewportは414のままでなぜかhtmlだけが320になります。
つまり画面右側に余白がでます。
パターン3
<meta name="viewport" content="width=320, initial-scale=1">
- window.innerWidth = 414
- htmlのwidth = 414
widthは無視されます。
パターン4
<meta name="viewport" content="width=320, initial-scale=2">
- window.innerWidth = 320
- htmlのwidth = 320
???
initial-scaleが無視されている。
パターン5
<meta name="viewport" content="initial-scale=2">
- window.innerWidth = 207
- htmlのwidth = 207
scaleが効いている。
パターン6
<meta name="viewport" content="width=device-width">
- window.innerWidth = 414
- htmlのwidth = 414
パターン7
<meta name="viewport" content="width=device-width, initial-scale=1">
- window.innerWidth = 414
- htmlのwidth = 414
パターン8
<meta name="viewport" content="width=device-width, initial-scale=2">
- window.innerWidth = 414
- htmlのwidth = 414
initial-scaleが無視されている。
まとめ
maximum-scale=1
を入れている場合は注意が必要です。
今回の検証から見るに、maximum-scale
はscale 1=device-widthと設定されるが、
viewportにwidthを指定するとそれはhtmlにしか効かない挙動になります。
つまりwidth:320と指定した場合はscaleが「414/320」にならないと横幅いっぱいにならないようです。
また、maximum-scale
とminimum-scale
を指定してもピンチの制御は行えず、
user-scalable=no
も効かなくなったので、maximum-scale
とminimum-scale
は使わないほうがよさそうです。