LoginSignup
48
44

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-16

詳しい仕様変更は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は使わないほうがよさそうです。

48
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
44