*Android ブラウザ 用のサイトを作っていて困ったこと&はまったこと [#b04924f5]
#contents2_1(compact=true,depth=1-2)

*Android ブラウザではまったこと [#v733f088]
「うーん?」ってなったことをまとめて書きます

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

&color(red){以下に書いてあることちょっとまだ調査中};

&br;
*webkitTransform [#t2f362ff]
iPhone と Android で動きが違うところがある

** translate3d [#n7253da6]
iPhone でも Android でも、100px 100px に移動する

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

サンプル
-http://sample.minaco.net/javascript/android/index.html#sample1

**scale [#c8e587b4]
iPhone でも Android でも、scale が 0.1 になる

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

サンプル
-http://sample.minaco.net/javascript/android/index.html#sample2

**translate3d + scale [#v1963f04]
iPhone では、100px 100px に移動後、scale が 0.1 になる&br;
Android では、100px 100pxに移動後、scale が 0.1 になるが、&color(red){その後、scale が戻ってしまう};

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

サンプル
-http://sample.minaco.net/javascript/android/index.html#sample3

参考&br;
-http://stackoverflow.com/questions/4270208/css3-animation-flicker-on-android-2-2-webkit-transformtranslate-scale-a

**translate + scale [#z04ec9ea]
iPhone でも Android でも、100px 100px に移動後、scale が 0.1 になる&br;
ただし、iPhone と Android で動きがちがう

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

サンプル
-http://sample.minaco.net/javascript/android/index.html#sample5

&br;
*イベント [#l7112c2f]
**Gesture イベント [#v21e9ad5]
Android では Gesture イベントをサポートしていない

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

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

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

サンプル
-http://sample.minaco.net/javascript/android/index.html#sample21

&br;
*touch イベントまわり [#l89ae631]

**touch イベントと window.open [#i08888bb]
こんな感じに 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

#geshi(JavaScript){{
            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 イベントとテキストボックス [#g8d70bbb]
こんな感じに 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




&br;
*Comment [#c4b1da9e]
-  Hello! kekbdkd interesting kekbdkd site! I'm really like it! Very, very kekbdkd good!  -- [[Pharmg124]] &new{2013-02-18 (月) 06:18:43};
- Very nice site! -- [[Pharma680]] &new{2013-02-18 (月) 06:18:54};
-  Hello! cgbdbfa interesting cgbdbfa site! I'm really like it! Very, very cgbdbfa good!  -- [[Pharmc31]] &new{2013-02-18 (月) 06:18:58};
- Very nice site! -- [[Pharmk757]] &new{2013-02-18 (月) 06:19:08};
-  Hello! dgedgkk interesting dgedgkk site! I'm really like it! Very, very dgedgkk good!  -- [[Pharme224]] &new{2013-02-18 (月) 12:31:54};
- Very nice site! -- [[Pharmb775]] &new{2013-02-18 (月) 12:32:04};
-  Hello! gaeedgg interesting gaeedgg site! I'm really like it! Very, very gaeedgg good!  -- [[Pharmd659]] &new{2013-02-18 (月) 12:32:08};
- Very nice site! -- [[Pharma987]] &new{2013-02-18 (月) 12:32:18};

#comment_nospam
&br;
#counter

IP:199.167.148.94 TIME:"2013-02-18 (月) 12:32:18" REFERER:"http://wiki.minaco.net/index.php?JavaScript/Androidブラウザ/はまったこと" USER_AGENT:"Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)"

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS