技術日記()

てきとーに気になったことなど書いていきます

レスポンシブサイト制作の際に気をつけること

RaspberryPiにWebサーバ入れて、
早速scpでファイル送ってサイトの確認していたところ...

スマホ版が想定してたのと全然ちがうやん!!
もっと小さい状態になってほしいねん!!

経緯

はい。というわけであるレスポンシブサイトを制作中でして、
ずっとPCのブラウザ上でのみ動作確認しながら作り進めておりました。
そんな中 chrome開発ツールのシミュレーションの存在に気づき試してみると...
これマジでこれ?
となったのでWebサーバー上にアップしてみると
chromeで見たものと大体同じ感じで絶望したという流れです。

原因

とても頭の悪い話ですが、
ブラウザを小さくしていきスマホぐらいの大きさになったところが
スマホで表示されるのだろうと思い込んでいました。

私はcss@mediaでレスポンシブさせていたので
切り替えのタイミングはpxで決まっています。
そして、pxの実質的な大きさはdpiによって変動するものなので
端末によって切り替わる位置が変わっているという感じ。

つまり原因はdpiのことを考慮せずにレスポンシブの際に
%指定せずに少しずつpx指定で縮めていくように作ったことかな...

改善策

今回は使用が想定されるPCの横幅が1800pxくらいということを考えて、 1024pxくらいで切り替えるか...

調べたところスマホは大体dpi300超えで
iphone5が横幅600pxみたいだからそれくらいを考慮しながら作るといいかも

その他レスポンシブサイト制作で参考になったサイト
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG