この記事では、 ブラウザーのビューポートは、ウェブコンテンツを見ることができるウィンドウの領域です。これはレンダリングされたページと同じサイズではないことが多く、その場合、ブラウザーはユーザーがスクロールしてすべてのコンテンツにアクセスできるよう、スクロールバーを提供します。 モバイル端末やその他の狭い画面では、通常画面よりも広い仮想ウィンドウまたはビューポートでページをレンダリングし、レンダリング結果を縮小して、すべてを一度に見ることができるようにするものがあります。ユーザーは、パンやズーム操作によって、ページのさまざまな領域を見ることができます。例えば、モバイル画面の幅が 640px の場合、ページは 980px の仮想ビューポートでレンダリングされ、 640px の空間に収まるように縮小されるかもしれません。 これは、すべてのページがモバイル用に最適化されているわけではなく、小さなビューポート幅でレンダリングすると壊れてしまう（あるいは少なくとも見た目が悪くなる）ために行われます。この仮想ビューポートは、モバイル端末に最適化されていないサイト全般を、画面が狭い端末でも見やすくするための方法です。
しかし、この仕組みは、メディアクエリーを使用して狭い画面に最適化されているページにはあまり向いていません。例えば、仮想ビューポートが 980px の場合、640px や 480px 以下で起動するメディアクエリーは絶対に使用せず、こうしたレスポンシブデザイン手法の有効性を限定してしまうのです。ビューポートのメタタグは、このような画面の内側が狭い端末における仮想ビューポートの問題を緩和するものです。 一般的なモバイルに最適化されたサイトには、以下のようなものがあります。 すべての端末が同じ幅というわけではありません。画面のサイズや方向が大きく異なる場合でも、ページがうまく動作するようにする必要があります。
widthビューポートの大きさを制御します。これは heightビューポートの大きさを制御します。これは initial-scaleページを最初に読み込んだときの表示倍率を制御します。最小値は minimum-scaleページ上でどの程度ズームアウトを許可するかを制御します。最小値は maximum-scale
ページで許可される拡大率を制御します。 3 より小さい値を設定するとアクセシビリティに違反します。最小値は user-scalableページ上でズームインとズームアウトのアクションが許可されるかどうかを制御する。有効な値は 警告: 画面の密度画面解像度が上がり、人間の目では個々のピクセルが識別できないサイズになりました。例えば、スマートフォンの画面は、小さな画面でも1920〜1080ピクセル（〜400dpi）以上の解像度を持っている場合がほとんどです。このため、多くのブラウザーは、 CSS 「ピクセル 」 1 つに対して複数のハードウェアピクセルを対応させることで、より小さな物理サイズでページを表示することができます。当初は、タッチ操作に最適化された多くのウェブサイトで、ユーザビリティと読み取り可能なサイズの問題が発生しました。 高 dpi の画面においては、 既定のピクセル比は、ディスプレイの密度に依存します。密度が 200dpi 未満のディスプレイでは、比率は 1.0 です。密度が 200 〜 300dpi のディスプレイでは、比率は 1.5 です。 300dpi 以上のディスプレイの場合、比率は整数の floor(density/150dpi) となります。既定の比率は、ビューポートの縮小率が 1 に等しい場合にのみ適用されることに注意してください。それ以外の場合は、 CSS ピクセルとデバイスピクセルの関係は、現在のズームレベルに依存します。 ビューポートの幅と画面の幅サイトでは、ビューポートを特定のサイズに設定することができます。例えば、 初期または最大の縮尺を設定したページでは、 他にも利用できる属性として モバイル端末とタブレット端末の一般的なビューポートサイズどのモバイル端末とタブレット端末がどのようなビューポート幅を持っているかを知りたい場合は、ここにモバイル端末とタブレット端末のビューポートサイズの包括的なリストが掲載されています。ここでは、縦向きと横向きのビューポート幅、物理的な画面サイズ、オペレーティングシステム、デバイスのピクセル密度などの情報を提供しています。 仕様書
Google Search Consoleの「モバイル ユーザビリティ」で「テキストが小さすぎて読めません」という指摘を受けたけど、どう対処すればいいの？そんな時は、ビューポートを設定するだけで簡単に解決できます！ビューポートの設定方法をご紹介するとともに、ビューポートの設定で表示が崩れてしまった時の対処法もご紹介します。 Google Search Consoleの「モバイル ユーザビリティ」モバイルユーザビリティとは「モパイルユーザビリティ」とは、タブレットやスマホでのページの使い勝手の良し悪しのことです。 パソコンでサイトを製作していると、なかなかスマホ画面での表示を確かめる機会はないと思います。しかし、最近ではスマホからWEBサイトを閲覧する方も多いので、モバイル端末でも使い勝手のいいページにしたほうがよさそうです。 モバイルユーザビリティが悪い例筆者はHTMLとCSS、PHPでサイトを自作しています。Google Search Consoleに登録して数日後から、「モバイル ユーザビリティ」について色々と指摘を受けました。 そのとき、作成したページはスマホではこのように表示されていました。スマホ画面で見ることを想定すると、右のナビゲーションバーの内容などは小さすぎて内容が全く分からない状態です。  PCからスマホ画面での表示を確認する方法自分のサイトがどのようにスマホで表示されているか、PCからでも確認ができます。ここではGoogle Chromeを例に確認方法をご紹介しますが、多くのブラウザも手順は同じです。
異なる画面幅で確認したいときは、画面中央上部から表示端末を切り替えてみてください。 「テキストが小さすぎて読めません」の対処法では、「テキストが小さすぎて読めません」とGoogle Search Consoleに指摘された時にはどのように対応すればいいのでしょうか。 Googleの案内は英語…モバイルユーザビリティが良くない場合の対処法については、Googleのヘルプページ「モバイル フレンドリー テストツール」の「エラーの一覧」にまとめられています。しかし、困ったことに「テキストが小さすぎて読めません」の対処法のページは英語ページに飛びます（2020年10月現在）。 「テキストが小さすぎて読めません」を一発解消する「ビューポート」の設定方法英語のGoogleのページ内容を要約すると「ビューポートをメタデータに設定しなさい」というものです。 実際の対処法がこちら。HTMLのheadの間に、「<meta name="viewport" content="width=device-width, initial-scale=1">」という一文を入れるだけです。簡単ですね。 <!DOCTYPE
html> ビューポートの設定を入れるとスマホページの表示が崩れてしまう時の対処法は後ほどご紹介します。 ビューポートとは？さて、設定したばかりのビューポートですが、いったいどんなものなのでしょうか？ スマホには画面解像度と表示解像度がある理解のために、PCやタブレット、スマホの画面幅について少しご説明します。画面の解像度の横幅は、PCなら2500px以上のものもあり、タブレットなら750~1600px程度。スマホでは600px~2000px以上と幅があります。スマホは小さな画面でありながら、PC並みの画面が解像度を誇る端末もあるんですね。 画面解像度を考えると、スマホの小さな画面にPCと同じページを表示させることも可能です。しかし、小さな画面にPCと同じ内容を表示されても読めません。そこで端末に設定されているのが「dp(density-independent pixels)」です。 「dp」は「実際の解像度は横幅1200pxだけど、表示は横幅400pxで読み込むよ」と端末側で設定するものです。「表示解像度」とここでは呼びましょう。「表示解像度」横幅400pxで読み込めば、小さなスマホ画面でも文字も読みやすい大きさになります。 スマホ表示解像度に合わせるのが「ビューポート」ここで、先ほど設定したビューポートをもう一度見てみましょう。「width=device-width」という一文が入っていました。これは、「画面幅をスマホ端末の表示解像度に合わせる」という規定です。 <meta name="viewport" content="width=device-width, initial-scale=1"> ビューポートを設定していない場合には、画面解像度にあわせて表示されてしまうページ。ビューポートを設定することで、表示解像度で表示されるようになります。 また、スマホの縦画面と横画面ではページの横幅が違います。横画面にすると横幅は広くなりますが、端末によっては回転したときにも縦画面と同じ横幅を使うものもあります。このとき、画面幅が広くなっているので、必然的にページが拡大表示されてしまいます。「initial-scale=1」を設定すると、画面幅を正しく認識し、端末を回転したときにもその横幅に合わせて表示をしてくれるようになります。 ビューポートの設定で表示が崩れてしまう時の対処法ビューポートを設定すると、表示される文字は大きくなりました。しかし、PCで作成していた画面の表示が崩れてしまうこともあります。実際に筆者のサイトも大幅に表示が崩れて、下の画像のような悲惨な状態になってしまいました。 対処法としては、スマホ画面に対応できる設定を入れ込む必要があります。ここで役立つのが、「media属性」というスタイルシートです。例として、下記スタイルシートでは小見出しの「h2」の文字の大きさや余白を画面幅に応じて変更しています。「max-width: 600px」で600px以下の画面での表示、「min-width: 601px」で601px以上の画面での表示を指定しました。
@media (max-width: 600px) { この対応については、面倒ですが、ひとつひとつの要素を確認しながら変更していくしかありません。変更中もサイトを公開し続けたい場合の対応法は次の小見出しで紹介しています。 スマホ対応移行期のビューポート設定上で根本的な対処法をご紹介しましたが、対処中にもページを公開しておきたい方もいると思います。しかし、ビューポートの設定を外してしまうと、スマホ画面では読みにくい画面になります。 そんなときには、一時的に最小画面幅を設定してしまいましょう。下記のようにビューポートの設定を変えることで、画面幅が600px以上の時は画面幅に合わせて、画面幅が600px以下の時は600pxで表示されるようになります。 <meta name="viewport" content="width=600"> この設定で、スマホで表示しても文字は小さくなり過ぎず、かつレイアウト崩れは起こさずに表示可能です。適した画面幅はページによって異なりますので、「width=600」の数字を変えて適した画面幅を選んでみてください。 なお、この設定ではGoogle Search Consoleの「モバイル ユーザビリティ」に合格することはできません。あくまでも、「<meta name="viewport" content="width=device-width, initial-scale=1">」に変更する間の一時的な対処法です。最終的には「 @media」を利用して、スマホ表示にも対応できるページに変更しましょう。 まとめ今回は「テキストが小さすぎて読めません」の対処法をご紹介しました。Google Search Consoleの「モバイル ユーザビリティ」に他のエラーが出た場合にも利用できる対処法ですので、参考にしてみてください。 ちなみに、筆者がGoogle Search Consoleのモバイルユーザビリティで受けた指摘は以下の通り。全ての指摘を網羅しているのではないかと思うほどの指摘量です。「<meta name="viewport" content="width=device-width, initial-scale=1">」の設定でエラーは表示されなくなりました。
この記事がサイトを自作している同志の方のお役に立てば幸いです。 |
ビューポートが デバイスの幅に収まるよう設定 され てい ません
著作権 © 2024 toptenid.com Inc.
