Android
Android Studioからではなく、コマンドラインからDNSサーバを指定して起動すれば解決しました。 /Users/#{ユーザー名}/Library/Android/sdk/emulator/emulator -avd #{エミュレータの名前} -dns-server 8.8.8.8といった具合です。 とりあえずシェルスクリプ…
年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…
<input type="file" accept="image/jpeg, image/png"> という感じでaccept属性を設定して、ファイルをアップロードしようとすると、 一部のAndroid端末で選択肢に何故か音声レコーダーとかも表示されてしまいます。 (しかも機種によっては許可していないgif画像もアップできてしまいます。) 対策 <input type="file" accept="image/*"> と指定する…
結論 結論を先に書いておくと、当面は、 ページの拡大を止めないとき <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> ページの拡大を止めるとき <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> と書いていこうと思います。 viewportと…</meta></meta>
iOS9.3のiPhone6、Android6.0のNexus 5Xをつかってスマートフォンブラウザのリサイズイベントのタイミングを調べました。 リサイズイベント発火タイミング デバイス回転時 デバイスのオリエンテーションを変化させるとブラウザの理財図イベントが発火します…
ずっと無理だと思ってました。 いちかばちか SpeechRecognition をつかったら、 Nexus 5X (Android6.0) Nexus 5 (Android5.1) で動きました。ためしてみるもんですね。developer.mozilla.org ソースコード JavaScript (function(win, doc) { "use strict…
結論から言うと、Android で position: fixed の要素をセンタリングしたいときは .centering { position: fixed; left : 0; right: 0; margin: auto; } という感じではなく、 .centering { position: fixed; left : 50%; margin-left; -width / 2px; } みた…
kimizuka.hatenablog.comこちらの記事 で紹介しましたが、Androidでは擬似要素にCSSアニメーションが効かない機種があり、その対策として.afterというクラスを持ったdivに置き換えていたのですが、置き換えても一部AndroidでのみCSSアニメーションが再生され…
本日遭遇しました。 displayをblockにしたあとにbackground-imageのurlのパスにタイムスタンプをつけることによって解決しました。 この方法では、レンダリングが2回走ることになり、サイズの大きなgifアニメだと一瞬消えてしまうので注意が必要です。 JavaS…
便利ですが、範囲の指定には気をつけましょうという話です。github.com // grunt-autoprefixer autoprefixer: { options: { browsers: ["last 2 version"] // 対象のバージョンが指定できる }, develop: { src: "build/data/css/*.css" }, distribution: { s…
kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…
先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS(backgroundでイ…
kimizuka.hatenablog.com kimizuka.hatenablog.com 以前の調査結果から、自作のツイートボタンには /share をつかっているのですが、最近Androidから叩いたときにデフォルトでページURLが入力されない機種があることに気づきました。TWEET #btn20150810 { di…
DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF
inputタグ の accept属性に capture=camera をつけておくとAndroidでは即カメラを起動してくれます。(iPhoneではカメラロールから選択するかカメラを起動するか選択させるUIが表示されます) HTML <form class="inner"> <input type="file" accept="image/*;capture=camera" /> </form> DEMO
DEMO JavaScript window.devicePixelRatio; で画面のピクセル密度を取得できます。が。Androidでは嘘の値が返ってくることがあるので、あんまり信用していません。 あと、ブログにDEMOを貼り付けてみてわかったんですが、jsdo.itのブログパーツ内だと変な値…
Android標準ブラウザで動かない場合があるようです。同じ機種でもChromeでは動きました。 DEMO CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, .25…
iOS や Android では 擬似的な clickイベント が用意されており、DOMに振ることができます。 clickイベントが発火する条件はもろもろあるのですが、指を動かしながら画面をタップすると、短めのフリックもclickと判定してくれることがわかります。 しかし、…
おどろくべきことに Android には touchmove が発火した後に touchend が発火しない機種があります。touchstart → touchend(発火) touchstart → touchmove → touchend(発火しない)という具合です。信じられませんが、こういうケースがあるのです。恐ろし…
以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…
Android標準ブラウザで長押しによる画像の保存を防ぎたく、いろいろ試してみました。 機種によっては背景画像すらも長押しで保存できてしまうので意外に大変です。背景画像にしても、デフォルト動作を切っても、イベントを受け取らないようにしても、上にDIV…
html要素に backface-visibility: hidden をかけるとブラウザの背景が透けてOSの背景が見えます。 CSS html { -webkit-backface-visibility: hidden; } DEMO 是非ともAndroid(2.3.X)でご確認ください。
kimizuka.hatenablog.comこの記事 の検証を行っているときに気づきました。セレクタに * をつかうと効かない機種があるようです。(Android 2.3.4で確認)
一部Androidで文字が変な箇所で折り返される現象は、その要素に背景色をつけることによって解決します。ただし、transparent や rgba(0, 0, 0, 0) ではうまくいかないので、1px 1px の透過pngを敷き詰めたりしているかたが多いとおもいます。そんなとき、透…
https://dev.twitter.com/ja/web/embedded-timelines https://dev.twitter.com/ja/web/embedded-timelines いつのまにかひっそりとサポートを切られていました。https://dev.twitter.com/faq/twitter-for-websites-%26-widgetsAndroidは4.Xからサポートとな…
基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…
<meta name="viewport" content="width=device-width,user-scalable=no"/> と設定すると一部Androidで拡大された状態で表示されてしまうのですが、 <meta name="viewport" content="width=device-width"/> メタタグの時点ではwidthのみ決めておき、 <script> document.querySelector("[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1, use…</meta></meta>
iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。すなわち、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); この記述でページスクロール…
iOS5.0以上のSafariではでoverflow: scroll をかけた要素に対して、 -webkit-overflow-scrolling: touch; をかけると、慣性スクロールが有効になります。 ※ 一部Androidでも有効になるようです。 【関連記事】kimizuka.hatenablog.com