Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
44
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
44
Help us understand the problem. What are the problem?