エントリー

【ブログ】サイトをレスポンシブ化したらタブレットの解像度で悩んだ

  • 2022/03/01 06:11

15年前のhtmlを再利用してみる

メモ代わりに設定を記録しておきます。

もはや、レスポンシブ化していないサイトはGoogleからも避けられる時代のようです。
勉強を兼ねて、既存のサイトをフルスクラッチしてみました。 html、CSS、PHP、Javascriptまですべて手打ちです。

PHPで静的サイトをつくる

レスポンシブ化で悩む

レスポンシブ化するにあたって悩んだのがブラウザの解像度。
googleAnaliticsでアクセスの傾向を確認すしてみたけど、ブラザの種類が多すぎる。
iphoneとipadからのアクセスが多いけど、Appleの製品を持ち合わせていないので確認不能。
chrome ブラウザの機能でシュミュレーションできるけど、実機との違和感が拭えない。

ブレイクポイントを仮設定する

深く考えてもしょうがないので、なんとなくブレイクポイントを次のように設定してみた。

  • スマートフォン→480px →@media (min-width: 480px)
  • タブレット→960px →@media (min-width: 481px) and (max-width: 960px)  {

普段使っているスマホとタブレットはこれでOK。
FireFox、chromeでのシュミュレーションではうまくいっていますが、やっぱり実機確認は大切ですね。

 

ページ移動

ユーティリティ

サイト内検索

twitter

ありがとうございます

過去ログ