みかづきブログ その3

3ヶ月つづけてみました。

ナウでヤングなviewportの書き方調査 & まとめ 2015 春

結論

結論を先に書いておくと、当面は、

ページの拡大を止めないとき
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
ページの拡大を止めるとき
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />

と書いていこうと思います。



viewportとは

viewportについての詳しい説明は省きますが、スマートフォン向けのサイトをコーディングする際に最も重要なポイントのひとつです。
ざっくりいうと、画面の横幅を何pxとして扱うかとう概念で、例えばviewportを320pxに設定すればwindow.innerWidthが320になります。



viewportの指定方法

メタタグで指定します。

<meta name="viewport" content="" / >

という感じでcontent属性の中に色々指定できます。



有名なウェブサイトのviewport一覧

Google
<meta content="width=device-width,initial-scale=1.0" name="viewport">

とてもシンプルです。



Apple
<meta name="viewport" content="width=device-width, initial-scale=1" />

順番は違えど記述している項目はGoogleと同じです。
基本的にはこの書き方でOKなのかもしれません。



Facebook
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />

ユーザーがダブルタップやピンチで拡大縮小できないようにしています。
個人的にはwidthを書いていないことが驚きでした。




Twitter
<meta name='viewport' id='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>

こちらも拡大縮小を止めています。
拡大縮小を止めておきたいサイトはこの書き方に習うのが良いと思います。



Yahoo
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

Twitterのviewportに加えminimum-scaleが指定されています。



Hatena
<meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

nameのダブルコーテーションが抜けている気がします。
あとはTwitterと同じです。



Wikipedia
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0, width=device-width"/>

0.25 〜 5倍まで拡大縮小できるようになっています。



jump+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

トップページは何故かHTMLに記述がないため、JSで生成しているのかもしれません。

<meta name="viewport" content="initial-scale=1, user-scalable=0, maximum-scale=1">

ビューアーページはwidthの指定がなくなります。



結局のところどう記述すればよいのか

Google、AppleとスマートフォンのOSをつくっている会社が同じ書き方をしている為、

<meta name="viewport" content="width=device-width, initial-scale=1" />

と書くのが良いとおもいます。
この書き方だとページの拡大縮小ができてしまうため、

Yahooのように、

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" />

最小倍率、最大倍率、拡大できるか否かを記述し、ページの拡大縮小をとめてみても良いでしょう。

一昨年の年末、Android4.0.4とかを対応していた際に、
user-scalableを指定すると一部Androidで初期表示がおかしくなるという現象に出くわしたので、
それ以降user-scalableは動的にJSで動的に設定するという方針だったのですが、
最近のAndroidでは不要な処理なのかもしれません。

kimizuka.hatenablog.com

また、iOS9で若干viewportの挙動が変わったようで、ページ内に巨大なDOMがあった際、shrink-to-fitを設定していないと、巨大なDOMの大きさに合わせてページを縮小しようとする自体に出くわすことがあったため、

ページの拡大を止めないとき
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
ページの拡大を止めるとき
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />

と書いていこうと思いました。