CSS3のMedia Queriesでスマホ用のサイトを作るも解像度の高いAndroidではまったこと : kagzugiの備忘録
Media Queriesを使えばスタイルシートだけでスマホに対応できます。 （賛否両論あるようですが…） あちらこちらのサイトを参考に @media only screen and (max-width: 480px) {...} @media only screen and (max-width: 320px) {...} などと記述して、iPhoneで動作確認し、これはなかなかおもしろいなと思っていました。 ところが最後に確認した新しめのAndoroidで見ると、画面に収まらず右にはみ出ています。 もちろん手でタップとかピンチインすれば合わせられますが、やはり開いた時から 画面に合わせたい所です。 さんざん悩んで調べて分かったことは、 そのAndroidのピクセル数は、横720ピクセル、縦1280ピクセル。 サイトを見る時は横360ピクセルで動作している。 作ったサイトには<meta
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
