JavaScript/Androidブラウザ/はまったこと

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

• Android ブラウザではまったこと
• webkitTransform
  • translate3d
  • scale
  • translate3d + scale
  • translate + scale
• イベント
  • Gesture イベント
• タップしたときのオレンジ色
• touch イベントまわり
  • touch イベントと window.open
  • touch イベントとテキストボックス
• Comment

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

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

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

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

webkitTransform †

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

translate3d †

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

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

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample1

scale †

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

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

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample2

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)";

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample3

参考

• http://stackoverflow.com/questions/4270208/css3-animation-flicker-on-android-2-2-webkit-transformtranslate-scale-a

translate + scale †

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

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

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample5

イベント †

Gesture イベント †

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

• http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

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

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

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

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample21

touch イベントまわり †

touch イベントと window.open †

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

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

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample14

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

• http://stackoverflow.com/questions/3601184/window-open-returns-undefined-when-called-from-settimeout-on-android

            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);

サンプル

• http://sample.minaco.net/javascript/android/index.html#sample18

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

• http://subtech.g.hatena.ne.jp/cho45/20100610/1276102754

Comment †

• Hello! kekbdkd interesting kekbdkd site! I'm really like it! Very, very kekbdkd good! -- Pharmg124? 2013-02-18 (月) 06:18:43
• Very nice site! -- Pharma680? 2013-02-18 (月) 06:18:54
• Hello! cgbdbfa interesting cgbdbfa site! I'm really like it! Very, very cgbdbfa good! -- Pharmc31? 2013-02-18 (月) 06:18:58
• Very nice site! -- Pharmk757? 2013-02-18 (月) 06:19:08
• Hello! dgedgkk interesting dgedgkk site! I'm really like it! Very, very dgedgkk good! -- Pharme224? 2013-02-18 (月) 12:31:54
• Very nice site! -- Pharmb775? 2013-02-18 (月) 12:32:04
• Hello! gaeedgg interesting gaeedgg site! I'm really like it! Very, very gaeedgg good! -- Pharmd659? 2013-02-18 (月) 12:32:08
• Very nice site! -- Pharma987? 2013-02-18 (月) 12:32:18

お名前: