前回のアップデートの時に少しだけサンプルにレスポンシブな記述を追加していたのですが、メディアクエリのみに依存した記述をしていた為、Javascriptで表示幅をチェックした上でCSSファイルを読み込む様に変更しました。
まだ、最終的にどのような形にするか決めてないので、/examples/grids.html のみが、レスポンシブ・ウェブ・デザイン対応になっています。なお、画面の幅を判断して読み込む部分の記述は、 /js/responsive.js に記述してあります。今後ソースに含めるかどうか未定の部分の、iPhoneのアドレスバーを隠す記述も含んでいます。
今の所、MacのSafariとChrome、iPhoneのSafariでのみ確認をしています。他のブラウザで具合悪い部分がありましたらお知らせください。
今回の方法でも、スマートフォン側での読み込みに無駄があるので、最終的には、画面の幅を基準にCSSファイルの読み込みを分けるかもしれません。現在は、ベースのCSSファイルを読み込んだ後で、画面幅が狭い場合(481px未満)に responsive.css を読み込む形になっています。
コメント:0
コメントを投稿するにはログインしてください。
トラックバック:0
- この記事のトラックバック URL
- https://www.kei3.com/archives/263/trackback
- トラックバックの送信元リスト
- k3.grid.system Ver.0.4 - kei3.com より