モバイル対応 できるかな?
[ パソコン作業
]
強い台風が近付いているようで怖いけど 猛暑は少し収まった。
おかげで 庭仕事もできて パソコンの前で考えることもできた。
モバイル フレンドリー テストの結果を読んだり 対策をネットで調べたりして 直し方を少しだけ考えてみた。
指摘された問題点のうち viewport については html の metaを一行書き足すだけで解決できた。
スマホ用とパソコン用と二つの css を切り替える方法も調べた。
一枚目の画像は 今のまま。
二枚目の画像は meta に一行書き足してみたところ。
「モバイル用 viewport が設定されていません」というご注意は消えて 縮小表示されなくなったが 今度は「コンテンツの幅が画面の幅を超えています」というご注意。
「リンク同士が近すぎます」と言うご注意も そのまま。
次に 画面幅のサイズ指定などを消してみた。(三枚目の画像)
メニューバーを横幅いっぱいに作っているので 画面に収まらず うまくいかない。
すんなり解決とはいかなかったけど 進むべき方向は見えてきた。
パソコンの画面サイズで考えたデザインなので スマホの画面に詰め込むのは難しいような気がするが
もっと涼しくなったら・・・ ゆっくりと考えてみようかな。