Orchardノ空。

アクセスカウンタ

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

<<   作成日時 : 2013/05/19 23:51   >>

ブログ気持玉 0 / トラックバック 3 / コメント 0

とてつもなく久々の更新、恐らく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のときにどうレイアウトを変化させるかなどを、あらかじめ考えておくと良いかもしれません。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(3件)

タイトル (本文) ブログ名/日時
プラダ アウトレット
自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ ...続きを見る
プラダ アウトレット
2013/07/05 16:34
レイバン 店舗
自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ ...続きを見る
レイバン 店舗
2013/07/05 17:03
エアマックス 2012
自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/ウェブリブログ ...続きを見る
エアマックス 2012
2013/07/23 19:59

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
自作サイトを試験的にiPhoneに対応させてみた。 Orchardノ空。/BIGLOBEウェブリブログ
文字サイズ:       閉じる