みかづきブログ その3

3ヶ月つづけてみました。

Android

フラットデザイン、マテリアルデザインを目コピーする(スライダーUI編)

年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…

Androidのブラウザで写真をアップロードさせたいだけのに、音声レコーダーとか余計なものが表示されるときはaccept属性を見直すと解決することがある

<input type="file" accept="image/jpeg, image/png"> という感じでaccept属性を設定して、ファイルをアップロードしようとすると、 一部のAndroid端末で選択肢に何故か音声レコーダーとかも表示されてしまいます。 (しかも機種によっては許可していないgif画像もアップできてしまいます。) 対策 <input type="file" accept="image/*"> と指定する…

ナウでヤングなviewportの書き方調査 & まとめ 2015 春

結論 結論を先に書いておくと、当面は、 ページの拡大を止めないとき <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; と margin: auto; をつかうとレンダリング結果がずれることがある

結論から言うと、Android で position: fixed の要素をセンタリングしたいときは .centering { position: fixed; left : 0; right: 0; margin: auto; } という感じではなく、 .centering { position: fixed; left : 50%; margin-left; -width / 2px; } みた…

擬似要素をCSSアニメーションで動かそうとするとAndroidで動かない機種がでてくるときの対策でミスったはなし

kimizuka.hatenablog.comこちらの記事 で紹介しましたが、Androidでは擬似要素にCSSアニメーションが効かない機種があり、その対策として.afterというクラスを持ったdivに置き換えていたのですが、置き換えても一部AndroidでのみCSSアニメーションが再生され…

Androidでは初期状態が display:none; のgifアニメが動かない時があるらしい

本日遭遇しました。 displayをblockにしたあとにbackground-imageのurlのパスにタイムスタンプをつけることによって解決しました。 この方法では、レンダリングが2回走ることになり、サイズの大きなgifアニメだと一瞬消えてしまうので注意が必要です。 JavaS…

grunt-autoprefixerで自動でprefixをつける際に気をつけること

便利ですが、範囲の指定には気をつけましょうという話です。github.com // grunt-autoprefixer autoprefixer: { options: { browsers: ["last 2 version"] // 対象のバージョンが指定できる }, develop: { src: "build/data/css/*.css" }, distribution: { s…

スマフォ用軽量カルーセルをつくろう その3

kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…

grunt-contrib-cssminでminifyしたbackground-imageが一部Androidで表示されない

先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS(backgroundでイ…

Androidで自作ツイートボタンを押した際にURLが挿入されない際の対策

kimizuka.hatenablog.com kimizuka.hatenablog.com 以前の調査結果から、自作のツイートボタンには /share をつかっているのですが、最近Androidから叩いたときにデフォルトでページURLが入力されない機種があることに気づきました。TWEET #btn20150810 { di…

iOS7.X, Android4.Xではbody要素に overflow: hidden をあてても効かない

DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF

Androidでカメラを起動するボタン

inputタグ の accept属性に capture=camera をつけておくとAndroidでは即カメラを起動してくれます。(iPhoneではカメラロールから選択するかカメラを起動するか選択させるUIが表示されます) HTML <form class="inner"> <input type="file" accept="image/*;capture=camera" /> </form> DEMO

JavaScriptでDevicePixelRatioを取得する

DEMO JavaScript window.devicePixelRatio; で画面のピクセル密度を取得できます。が。Androidでは嘘の値が返ってくることがあるので、あんまり信用していません。 あと、ブログにDEMOを貼り付けてみてわかったんですが、jsdo.itのブログパーツ内だと変な値…

擬似要素をCSSアニメーションで動かそうとするとAndroidで動かない機種がでてくる

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…

スマートフォンで touchmove を preventDefault すると clickイベントが若干発火しにくくなる。

iOS や Android では 擬似的な clickイベント が用意されており、DOMに振ることができます。 clickイベントが発火する条件はもろもろあるのですが、指を動かしながら画面をタップすると、短めのフリックもclickと判定してくれることがわかります。 しかし、…

Android で touchend が発火しないときがある

おどろくべきことに Android には touchmove が発火した後に touchend が発火しない機種があります。touchstart → touchend(発火) touchstart → touchmove → touchend(発火しない)という具合です。信じられませんが、こういうケースがあるのです。恐ろし…

スマートフォンで長押しのメニューを表示させない

以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…

Androidで長押しによる画像の保存を防ぐ

Android標準ブラウザで長押しによる画像の保存を防ぎたく、いろいろ試してみました。 機種によっては背景画像すらも長押しで保存できてしまうので意外に大変です。背景画像にしても、デフォルト動作を切っても、イベントを受け取らないようにしても、上にDIV…

Android 2.3.X でブラウザの背景を透かす

html要素に backface-visibility: hidden をかけるとブラウザの背景が透けてOSの背景が見えます。 CSS html { -webkit-backface-visibility: hidden; } DEMO 是非ともAndroid(2.3.X)でご確認ください。

tap-highlight-colorをワイルドカードで指定するとAndroidで効かないことがある

kimizuka.hatenablog.comこの記事 の検証を行っているときに気づきました。セレクタに * をつかうと効かない機種があるようです。(Android 2.3.4で確認)

Androdで文字が変な箇所で折り返される現象をbase64で対策する

一部Androidで文字が変な箇所で折り返される現象は、その要素に背景色をつけることによって解決します。ただし、transparent や rgba(0, 0, 0, 0) ではうまくいかないので、1px 1px の透過pngを敷き詰めたりしているかたが多いとおもいます。そんなとき、透…

TwitterウィジェットがAndroid2.Xで表示されない

埋め込みタイムライン | Twitter Developers いつのまにかひっそりとサポートを切られていました。FAQ | Twitter DevelopersAndroidは4.Xからサポートとなっております。[ 2015.02.27 現在 ] DEMO

iPhone、Androidでページスクロールを止める

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

Androidでviewportがうまく効かない時は動的に設定すると解決することがある

<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でSafariのブラウザのページスクロールを禁止する

iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。すなわち、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); この記述でページスクロール…

スマートフォンでoverflow scrollをかけた要素に慣性スクロールを適用する

iOS5.0以上のSafariではでoverflow: scroll をかけた要素に対して、 -webkit-overflow-scrolling: touch; をかけると、慣性スクロールが有効になります。 ※ 一部Androidでも有効になるようです。 【関連記事】kimizuka.hatenablog.com