Android

[CSS3] Androidのmask-imageに関する不具合について

2013/01/09 CSS No comments , ,

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。

(さらに…)

モバイル端末のブラウザ画面サイズとMedia Queries

2013/01/07 CSS No comments , , ,

Androidの画面サイズがピンキリ過ぎてカッとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。

(さらに…)

Android 4.* で 画像がぼやける不具合について

2012/12/13 CSS No comments ,

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。

Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが1つの原因のようでした。

translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。

iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。

ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…

あー爆発すればいいのにAndroid。

もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。

[html5] Android 4.0 で HTML5 Test

2012/03/09 Memo No comments , , , ,

Android 4.0

昨日LABI渋谷のスマホ売り場見てたら
Galaxy Nexusに続きAQUOS Phone 104SHもAndroid4.0だったので、
触りついでにHTML5 Testしてみたんです。
結果の256という点数はHTML5 Testにもう載ってるんですが、
その詳細は見た事なかったので晒しておきます。

(さらに…)

[js] スマートフォンのAjax フォーム送信時にキーボードを消す

2012/02/14 Memo No comments , ,

Goボタンを押した時のイベントはsubmit もしくは event.keyCode のcode=13 で取れますが
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、
onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。

ボタンがあるならボタンにフォーカス移すのが手っ取り早い。