自作サイトを試験的にiPhoneに対応させてみた。

とてつもなく久々の更新、恐らく3年以上ものスパンになります。
本当にその間、色々あったんですよ(汗々)。

・自作サイトを試験的にiPhoneに対応させてみた。






画像

画像

こんな感じで、iPhoneで見るとレイアウトが変化するようになっています。
いわゆるレスポンシブデザインというやつで、
デバイスの画面幅で判断して、iPhoneの場合は専用のCSSを読み込む、という仕組みにしています。
もっとも、自分のサイトにiPhone向けのコンテンツや作品とか、
全く無いんですけどね(笑)。

・ちなみに、縦置きと横置きでも変化する。
@media screen and (max-device-width: 480px) and (orientation:landscape){ /* 画面が480pxの場合 */

}
例えば、この中に記述したスタイルはスマートフォンを横置きにしたときのみ読まれる仕組みになっています。
http://www.newton-graphics.com/blog/iphone/iphone%E3%83%BBipad%E3%81%AE%E7%B8%A6%E6%A8%AA%E3%81%A7css%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B/
こちらのページを参考に取り入れてみました。

ここまでやってみて分かったことは、
PC以外のデバイス(スマートフォンとか)で見る場合、最初からそれを想定して作った方がいいということ。
とりあえず、PCとタブレットでは基本的に同一のページを表示するとして、iPhoneのときにどうレイアウトを変化させるかなどを、あらかじめ考えておくと良いかもしれません。

この記事へのコメント

この記事へのトラックバック

  • プラダ アウトレット

    Excerpt: 自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ Weblog: プラダ アウトレット racked: 2013-07-05 16:34
  • レイバン 店舗

    Excerpt: 自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ Weblog: レイバン 店舗 racked: 2013-07-05 17:03
  • エアマックス 2012

    Excerpt: 自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ Weblog: エアマックス 2012 racked: 2013-07-23 19:59