ウィンドウサイズによってCSSファイルを切り替えることが出来るJavaScript「Adapt.js」｜BLACKFLAG
最近ではWebサイトを構築する際、PC画面での表示のみならず、スマートフォンやタブレットPCなど 複数媒体でのサイト閲覧を意識した設計およびレイアウトを考慮しなくてはならなくなってきています。 閲覧するブラウザやOSなどで振り分けを行う方法もいろいろありますが、 サイトを閲覧した時のウィンドウサイズによって読み込むCSSを切り替えることが 出来るJavaScriptライブラリ「Adapt.js」が便利そうだったので紹介。 Adapt.js – Adaptive CSS ≫Adapt.js – Adaptive CSS 上記のスクリプト紹介ページ自体がデモ画面にもなっており、 表示後、ウィンドウサイズを変化させることでレイアウトが最適化されるようになっています。 「Adapt.js」と下記スクリプトで実装可能となっています。 ◆SCRIPT // Edit to suit your need
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
Android Viewportとの戦い
tacamy @tacamy まじAndroidなんなの…。同じOSのバージョンでも機種によってぜんぜん違うんですけど…。ただ、WebClipアイコン置きたいだけなのに…。 2011-03-07 18:24:37
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル（user-scalable=noあり） サンプル（us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
