Be donkey, be wise

recommendation

ビューポートが設定されていませんの対処法【はてなブログ】

f:id:amazon_roba:20201013010827j:plain

この記事は "ビューポートが設定されていませんの対処法"についてお話していきます.

Google consoleのモバイルユーザビリティでエラー!?

記事を数枚書き上げ、googleにインデックス登録をした直後、

 

f:id:amazon_roba:20201016012542p:plain

 

Google consoleのモバイルユーザービリティでエラー!!!!』

『エラーが3つも出ている!!!!』

『モバイル?でもレスポンシブルデザインにしたよ。。。なんで。。。』

『訳が分からないよ。。。』

 

HTML初心者で、コピペばかりしていた自分には何言っているのかさっぱりわかりません。

 

レスポンシブルデザインなのになぜでしょうか。。 

 

とりあえずひとつずつ、解決していこうと思いました。

 

2. ビューポートが設定されていませんの対処法

ステップ.1 ダッシュボードの設定を開き詳細設定のタブをクリック

f:id:amazon_roba:20201016014921p:plain

真ん中のタブです

 

ステップ.2 下までスクロールし”headに要素を追加”にビューポートを追加

f:id:amazon_roba:20201016015858p:plain

この部分に下記のコードを入れていきます。

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

 

ここに入れる最適なコードを自分なりに調べた際、Takumi Kimura様の記事を参考にさせていただきました。本当にありがとうございます。

qiita.com

  

結果ビューポートのエラーはなくなりました!最後まで読んでいただき本当にありがとうございます。 Prrrffff(ロバの鳴き声)