WordPress等で作られたサイトが多くある昨今、
古くさい、こじんまりしたサイトでのviewport設定など書いてみようと思う。
まず、初っ端からいくと、
<meta name="viewport" content="width=device-width,initial-scale=1">
これで上手くいくサイトはこれで全て完結でOK。
問題は上手くいかないサイト。
固定幅の値や微調整が手動で行われていて古くさいサイトの場合、
例えば、私のサイトでは以下のような形で落ち着いた。
<meta name="viewport" content="width=700, target-densitydpi=device-dpi">
width で固定幅を決めて、
target-densitydpi=device-dpi で Android でも綺麗にきちんと表示されるようになった。
viewportの設定はほとんど一行で完結するものが多いため、
試行錯誤してたどり着いたのが私のサイトの最適解だった。
他デバイスをそんなに用意できないよ！という方も安心。
GoogleChromeには他デバイスでの表示を確認できる機能がある。
Chromeを開きF12を押して、訳の分からない画面が出て来たら、
この画面の左上の方にあるPCとスマホ画面が重なったような画像のボタン、
「デバイスのツールバーを切り替え」をクリック。
そうするとモバイル画面のシミュレーターになるので、
その後にF5キーでページをリロード。
後は、サイズ項目等で好きなものを選び、その都度F5で確かめられる。
作業が終わったらそのままChromeを閉じるか、
また「デバイスのツールバーを切り替え」ボタンを押し、
PC拡大率に戻してからF5を押してPC画面に戻した後、
F12を押せば元通り。
他にもF12には便利な機能が色々あるのだが
ゴチャゴチャしているので今回は割愛する。
ということで、これでviewportをの値をいじくりまわしながら確認作業をして、
問題が無ければアップロードしても大丈夫である。
今回は以上。何らかの参考になれば幸いである。