読了: 約 5 分
スマートフォンサイト制作でもブラウザ・機種依存に悩まされますよね。
納期が短かったりするとホントに＼(^o^)／ｵﾜﾀという感じになるので
メモしておきます。
photo credit: Cloned Milkmen via photopin cc
個人的にはAndroidのおかげで凄く工数がかかっています。
特殊な案件であるとは思いますが、そういう案件もスムーズに乗りこなせる変態になりたいですね。
[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
以下はコーディング上の注意点と、それ以前のクライアントにデザインを提出する際の注意点です。
ガラケーでもそうですが、できないものをデザインしてしまうと後が辛くなってしまいますので、
注意が必要です。
概要
1.フォントサイズについて
今回はxperiaでフォントサイズが小さいという問題をどうしようかと思っていました。
そもそも解像度の問題でiPhoneよりも小さく見えてしまうのですが、
同じように見えた方がユーザビリティが良いですからね。
iPhoneではbodyにfont-sizeを指定しない状態でも見れるサイズですが、
xperiaでは非常に可読性が悪いです。
ですので、CSSメディアクエリか、userAgentを切り分けて、
font-size:14px;とかにしてあげる方が良いでしょう。
2.角丸について
CSS3になってから重宝されるようになりましたが、androidでは角丸のふちが
ガサガサになってしまいます。
他サイトのを見てみると、対応策は以下の２つの様です。
- background-imageで画像を用意
- box-shadowでごまかす。
3.アイコンについて
RETINAディスプレイのため、アイコンはデザインしたものの2倍で書き出します。
シンボル化しておくか、コーディングの前のデザインの段階で2倍のものを作成しておくのが
良いですね。
背景画像なら
background-image:url(hoge);
background-size:width height;
HTMLに直書きしていて10px*10pxのアイコンなら20px*20pxで書き出して
以下のように記述。
>img src=”ほにゃらら” width=”100″ height=”100″ /<
参考
スマートフォン用サイト-はじめてのコーディングの前におさえておくこと
androidの背景画像がなくなって、テキストしかなくなる件
これ結構レアケースでググってもあまり見なかったのでメモしておきます。
androidでfixedを使っているとき、背景画像がなくなって、テキストしかなくなった方はいるでしょうか。
たまたまそれにあたって結構考えたのですが、原因がわかりました。
fixedかけつつ、text-indentをかけたらあかん
どうやら、backgroundの要素がtext-indentされてどこかに飛んでいってしまうようです。
なので、背景画像の要素があるメニューなどを固定したい場合は、下記のようなリーフィーラングリッジ式の画像置換をした方が良いです。
対象セレクタ{
height:0;
padding-top:要素の高さ;
}
上記で画像置換すれば親要素にposition:fixed;して固定ヘッダーやフッターができます。
対象OS:android2.x系,4.x系,ios5以上
その他（Androidアプリのデザインについて）
デザインする時にも最低限の事を念頭に置きながらやる必要がありますね。
解像度や上記したようなコーディング上のバグも念頭においておきたいですね。
おまけ
アイコンデザインに役立ちそうなサイトですね。
スマーとフォンのデザインではピクトグラムがよく使われているので
ご参考までに。
Android用アプリデザインやデスクトップ変更に利用したい無料アイコン素材15個まとめ
android2.3x系でのバグ
実際のスマートフォンのWEBアプリ制作ではまった所をメモしていきたいと思います。
android2.3x系でtableタグ内に下記のような構造を作った場合,position:relative;が効いてないので、
変な位置に行ってしまう。
iPhone3GS,4,4S,5+ iOS5,6,android 4.0系は確認しても大丈夫でしたので、
おそらくこれは2.3系特有のバグだと思います。
<table>
<tr>
<th>
<div style="position:relative;">
<div style="position:absolute;"></div>
</div>
</th>
</tr>
</table>
5.その他（iPhoneのあれこれ）
Retina displayの画像の出しわけについて
下記の記事が非常に面白かったです。
Retina displayやらPCとデバイスピクセル比が違うディスプレイに対して、違う画像を出し分けるという仕組みで
Appleが新しく実装したmage-set()について
Responsive imagesのための-webkit-image-set()
selector {
background: -webkit-image-set( url(foo-lowres.png) 1x,
url(foo-highres.png) 2x ) center;
みたいな書き方をするそうですね。
メディアクエリーとどう使い分けるかという事が気になりましたが、
たしかにメディアクエリーだと重複して読み込まれてしまいますね。
上記のサイトにかかれていますが、
メディアクエリーだとセレクタが多重になるので管理性が懸念されること、使わないもう片方の画像が読み込まれてしまう可能性があること、style属性でつかえないこと、この3つがいくつかある問題として取り上げられている。
非常にCSSのソースも複雑になってしまいますね。
ただ、結構な頻度でappleも仕様変更しているのですね。
今回たまたま知ったのですが、こういう仕様変更を追ってみても面白いかもしれません。
(2012/3/31追記)