Edited at

[iOS10] Safari10.0 でviewportの挙動が変わったので検証してみた

More than 1 year has passed since last update.

詳しい仕様変更は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-scaleminimum-scaleを指定してもピンチの制御は行えず、

user-scalable=noも効かなくなったので、maximum-scaleminimum-scaleは使わないほうがよさそうです。