Android

[js,css] Android4.1 が返す element.style.cssText の値が他と違う件

by

style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。

var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';

el.style.cssText = '-webkit-animation:hoge;';

document.write(el.style.cssText);

続きを読む

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

by

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

続きを読む

[js,css] テンキーがついているスマートフォンの罠

by

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定的に印象づけた
３〜４インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか？

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはauやdocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

続きを読む

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

by

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

続きを読む

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

by

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

続きを読む