はてなブックマーク - Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）

Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）

タグ : android スマートフォン iphone css html webデザイン viewport smartphone デザイン web制作

コンピュータ・IT 131 users

最近いろんなスマホ最適化されたサイトを見るようになりました。それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できるレイアウト方法をちょっとまとめてみようと思います。今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:1... > このページを見る

最終更新時間: 2011年05月07日14時48分

▼ブログで紹介する

みんなのブックマーク人気（0）新着

nilab smartphone_website_design
Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編） : viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウト 2012/03/31
zorio
はてなハイクはなぜwidth=320pxって指定してるんだろう。そのせいかどうか分らないけど、ときどきズームがおかしくなるんだけど。 2012/03/04
nakag0711
ユーザーが拡大縮小できないのは不便。PC向けで勝手にポップアップのサイズを固定にするのと同じメンタリティだな。 2012/03/04
nitoyon android, iphone, css
スマートフォンでは viewport を device-width、コンテナはwidth:100% にしてデザインするのが自然。iPhone に向けて 320px で作ってしまうと、Android の多様な解像度に対応できない。 2012/03/04
ponta8 CSS, html, android, iPad, iphone, javascript, layout
みくらべたりしてみやすいね 2011/09/27
caramelb0612 web制作, スマートフォン
メモ 2011/08/03
mpresso webデザイン, android
Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編） 2011/06/27
hiro_y iphone, android
viewportとかの指定 2011/05/16
melo1029 android, スマートフォン, CSS, iphone
スマートフォン対応サイトのviewportと全体の横幅の指定について。 2011/05/11
yocchi24 Android, webデザイン, スマートフォン, HTML
Androidはガラケー以上に機種ごとの対応が大変＞＜。まだまだ整理されて無い状態だし。 2011/05/10
uusisisi
Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編） 2011/05/09
smilestyle55 webサービス, デザイン, css, Android, iphone
viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする　自然な考え方で考えると、PCに比べるとただでさえ狭いディスプレイサイズなのですから、端末の画面をフルに使った方が良い訳です。 2011/05/08
kkeisuke
iPhone Android サイト 2011/05/07
rimrim99
読んどく 2011/05/07