10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Viewportの指定時挙動について(iPhone)

Posted at

確認環境

iPhone4sのSafariだけで確認しました。以下は全てこの環境での結果です。

Androidの場合でも同じ?

1.Viewport指定なし (ドキュメントのwidthが980px以下)

未指定時のiPhoneのviewport横サイズは980px。

縦: 横スクロールなしで表示される。

横: 横スクロールなしで表示される。(縦時にくらべていくらか拡大される)

2.Viewport指定なし (ドキュメントのwidthが980pxよりより大きい) :bomb:

縦: 980pxまでは横スクロールなしで表示できるように拡大される。

横: 縦向きと同じ挙動

:skull: 縦→横または横→縦に傾けると幅320px表示となるように拡大される。

3.width=device-width :bomb:

縦: 719pxまでは横スクロールなしで表示できるように拡大される。

横: 縦時にくらべていくらか拡大されている。

縦→横→縦とすると、最終的な幅は640pxになる。

:skull: 挙動がつかめない。

4.width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5 :white_flower:

縦: 640pxまでは横スクロールなしで表示できるように拡大される。

横: 960pxまでは横スクロールなしで表示できるように拡大される。(縦幅の1.5倍)

なお、拡大率のMIN,MAX共に初期倍率と同じため、拡大率は固定されている。

5.width=400 :white_flower:

縦: 400pxまでは横スクロールなしで表示できるように拡大される。

横: 400pxまでは横スクロールなしで表示できるように拡大される。

width=600(縦向き時widthより大きい幅)、width=1200(なんとなく大きい幅)でも同様の挙動となった。

:bangbang: コンテンツの幅とviewportのwidthを一致させること。異なる場合には上記とは違う動きをした。

まとめ

  • PCサイトにも width=<コンテンツ幅> なviewportを指定しましょう。

  • スマホサイト向けのviewportについて。widthはdevice-widthを指定して、明示的に初期スケール、MAXスケール、MINスケールを指定しましょう。

  • デバイス種類(PC,スマホ,タブレット)毎にViewを作成するのが無難そう?

参考にしたサイト

10
9
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
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?