Android ブラウザ 用のサイトを作っていて困ったこと&はまったこと

Android ブラウザではまったこと

「うーん?」ってなったことをまとめて書きます

iPhone Safari ではまったことは、こちら -> JavaScript/iPhoneSafari/はまったこと

以下に書いてあることちょっとまだ調査中


webkitTransform

iPhone と Android で動きが違うところがある

translate3d

iPhone でも Android でも、100px 100px に移動する

element.style.webkitTransform = "translate3d(100px, 100px, 0)";

サンプル

scale

iPhone でも Android でも、scale が 0.1 になる

element.style.webkitTransform = "scale(0.1)";

サンプル

translate3d + scale

iPhone では、100px 100px に移動後、scale が 0.1 になる
Android では、100px 100pxに移動後、scale が 0.1 になるが、その後、scale が戻ってしまう

element.style.webkitTransform = "translate3d(100px, 100px, 0) scale(0.1)";

サンプル

参考

translate + scale

iPhone でも Android でも、100px 100px に移動後、scale が 0.1 になる
ただし、iPhone と Android で動きがちがう

element.style.webkitTransform = "translate(100px, 100px) scale(0.1)";

サンプル


イベント

Gesture イベント

Android では Gesture イベントをサポートしていない


タップしたときのオレンジ色

Android では、リンクやテキストボックスをタップしたときにまわりがオレンジ色になる。alpha を 0 にすることで消せる。

#hoge1 {
     -webkit-tap-highlight-color:rgba(0,0,0,0);
}

サンプル


touch イベントまわり

touch イベントと window.open

こんな感じに touch イベントをつけると、画面タッチ後に window.open できない!? location.href ならできるけど。。。 iPhone では大丈夫なのに。。

document.addEventListener('touchstart', touchstart, false);

サンプル

と思ったら、この記事に書かれているようにしたらできた。

            function go(){
                window.open('about:blank');
            }
            function fnc()
            {
                var buttonnode= document.createElement('input');
                buttonnode.setAttribute('type','button');
                buttonnode.setAttribute('name','sal');
                buttonnode.setAttribute('style','display:none;');
                document.body.appendChild(buttonnode);

                buttonnode.onclick = go;

                setTimeout(function() { buttonnode.click() }, 100);
            }

touch イベントとテキストボックス

こんな感じに touch イベントをつけると、テキストボックスに入力ができなくなる!? iPhone では大丈夫なのに。

document.addEventListener('touchstart', touchstart, false);

サンプル

こういうの関係あるのかなぁ。むー


Comment



Counter: 36772, today: 6, yesterday: 0

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS