![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
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 になる element.style.webkitTransform = "translate3d(100px, 100px, 0) scale(0.1)"; サンプル 参考 translate + scale †iPhone でも Android でも、100px 100px に移動後、scale が 0.1 になる 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: 38318,
today: 1,
yesterday: 1
|
