HTML viewport の正しい書き方

最終更新:2021-03-22 by Joe

何が正しいのか、よくわからないHTMLのおけるviewport の書き方について

viewport はこう書くのが正解

先にまず結論から。Viewportはこのように書くのが正解です。当然ですが、 タグの中に記載してくださいね。

<head>
  ...
  <meta name="viewport" content="width=device-width">
  ..
</head

※ただし、上記は「レスポンシブなレイアウト(サイトを拡縮しないウィンドウの横幅に張り付くレイアウト)」の場合に限ります。意図的にサイトの表示を拡縮させたい場合は、この限りではありません。

モバイル端末ブラウザーで、タップの反応速度が早くなる!

モバイル端末のブラウザ(正確には、)は、通常「タップ」と「ダブルタップ」イベントの差分を区別するため、300ms ~ 350ms 程度「タップ」の検出を遅らせているそうです。

※正確には「”touchend” イベント発生から、 “click” イベントが300ms ~ 350ms 遅れる」です。(詳しくは後述の文献参照)

ただし、viewport の値を width=device-width とすれば、この遅れを消すことができるそうです。

参考文献: viewport の書き方

こちらが該当のGoogle公式開発記事です。viewport 指定方法に言及しています。

For many years, mobile browsers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.

訳:長い間、モバイルブラウザーは touchend と click の間に 300-350ms の遅延を適応していた。ダブルタップがテキストのズームのジェスチャーだったので、タップがダブルタップになるかどうかを見定めていたからだ。

This sets the viewport width to the same as the device, and is generally a best-practice for mobile-optimized sites. With this tag, browsers assume you’ve made text readable on mobile, and the double-tap-to-zoom feature is dropped in favour of faster clicks.

訳:(この viewport タグによって)実際の viewport の横幅はデバイスと同じ幅になり、それは通常、モバイル最適化されたサイトのベストプラクティスだ。このタグでブラウザーはテキストはモバイルですでに読みやすくされていると判断し、ダブルタップズーム機能を停止し、より早いクリック検出を優先する。


もう viewport はこれで決まりですね!

細かいことは、もう忘れても良さそうです。