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

  • 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


Counter: 32886, today: 2, yesterday: 2

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-09-24 (火) 14:56:09 (1336d)