駅情報検索をiPhone / iPad / Facebookページ / PCに最適化

駅情報検索は必ずしもPCだけで使いたいものではないので、デバイスの表示の最適化はやりたかったのです。今まではPC用とiPhone用に振り分けてたのですが、一つのCSSファイルにまとめました。

【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル

CSSファイルはこんな感じ。

@charset "utf-8";
/* CSS Document */

共通のCSSとFacebookページを想定したCSS

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

iPhoneを想定したCSS

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

iPadを想定したCSS

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1200px) {

大きな画面のPCを想定したCSS

}

これを追加。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

これで大分行けますね。ただガラケーの最適化ノウハウが無いのと端末も持ってない。どう表示されているのか、ちと不安。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）