Skip to main content.
AndroidとiPhoneはともかくとして、iPadは画面サイズでかいから、普通にPCサイトを表示してもいいのでわ?と思ったり。
Flashのコンテンツがあるから別途振り分けたいとかならまた別ですが。

なんか、iPadでスマホ対応サイトを見た時の画面の余白部分の多さにちょっとガッカリ感を感じる今日この頃です。

いくらリキッドレイアウトでデザイン崩れが起きないからと言ってiPhone・Androidで丁度良い感じに見れる情報量をiPadで見るとスカスカな印象は否めないんよ(・ω・`)
iPhoneサイトを作り始めて、最近気付いた点をメモ。

普通にPCサイトの感覚で作って、いざiPhoneで表示すると文字が大きくてなんか他のiPhoneサイトと違うな・・・と思った場合の対処法です。

下記のmetaタグを入れればOK。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=0.6, width=device-width, user-scalable=no" />


これで画面サイズが横幅きっちりとなります。
(但し、画面の横幅以上のwidthの値を設定しているものがあれば別です)

でも、これだけではまだフォントサイズがしっくりしない・・・っていうかでかいです。
cssの内容にもよるとは思いますが私の場合はでかかったです。

そこでスタイルシートで下記の通りに設定。

* {
-webkit-text-size-adjust:100%;
}


サイズはこれでOK。
あとは、下記リンクにiPhoneに搭載されているフォントの一覧がありますので、ここを参考にお好みのフォントを設定すればiPhone対応っぽいサイトに見えるはずかと。

【iPhone & iPad 搭載フォントを調べてみた】--サイト作りの参考に iPhone編 | tuglog!
http://blog.tug.lomo.jp/?eid=990243

iPhone対応サイト制作に際して、html4,html5とcss3を勉強中。

<dl>,<dd>,<dt>タグを初めて知ったんよ(・ω・`)

iPhoneって画面を傾けると横幅が480pxと320pxとで切り替わるから、どちらの向きでもデザインが崩れないようにリキッドデザインでやってみたものの、固定幅のデザインと可変幅のデザインで変な余白が出たりするから、妥協の出ないデザインにする為にあらためてガッチリとしたリキッドデザインの組み方も勉強中。

ほんの数年で新しい仕様や要素がバンバン出てくるからこの業界は困るんよ(・ω・`)
20110502-iphonesite.png

突然振られたiPhone対応サイト制作。
普通のPCサイトの作りとはまた違う点がちょいちょいあるという風にはネットで見ていたので、どこから手をつければ良いのか適当にググってみました。

その中で本当にiPhoneサイトを作ったことの無い人への初心者用参考サイトとして見て役に立つなぁと思ったサイトのメモメモです。

続きを読む
 
«Prev || 1 · 2 · | Next»