駅情報検索を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;" />

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

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

posted with amazlet at 15.09.10

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

Amazon.co.jpで詳細を見る

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

加藤 康祐 / 企画・設計

1980年1月12日生まれ。1998年よりデザイン会社のパートタイムアシスタントとしてWeb制作を経験。2005年に独立、フリーランスとして、企業、個人、NPO、独立行政法人など、様々な領域でのITやデザインによるサポート業務に携わる。2018年、加藤康祐企画設計を開業。これまでの経験を活かし、より広い視野でクライアントの問題解決に取り組み、クライアントと一緒になって新しい価値創出をし、平静な社会の実現を目指す。

加藤康祐企画設計

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