androidでスクロール（フリック）できないバグ｜ブログ｜横浜のウェブサイト・印刷物制作 マジリ
2013年01月26日 最近スマートフォン対応作業が増えてきて、PCと同じ感覚で作ってると上手くいかない事がままあります。そんな中で一番「え？』と思ったのがandroidのスクロールバグです。 縦幅横幅を数値で指定したエリアに対して、overflow:scrollを入れればスクロールバーが付くのはウェブ制作者なら誰でもご存知かと思いますが、なんと、androidではこの部分にバグがあり、スクロールができないんです。 スマホサイトの場合、エリア内スクロールを実装する事自体があまり無いのかもしれませんが、サイトの利用規約とか文章が長いものを設置する場合はスクロールできるエリアを用意してページ内のスペースを節約したりすると思います。 で、これどうすりゃ良いんだよって思ってたら、解決してくれている人が居たので試してみました（http://lagoscript.org/jquery/flickabl
【Android爆発願】メディアクエリの特性を疑似要素(::after)とJavaScriptで取得するのは危険 | MJ-WAVE.COM
流行りのレスポンシブウェブデザインですが、効率のいい実装方法はないかと日々探しています。今回はjavascriptで条件分岐とかしたい時のおはなし。 こちらの記事(英語)を参考に疑似要素(::after)とcontentプロパティを使って簡単に条件分岐できるやーん！っていうのをやってみたんだけど、これダメだ全然使えません。 いや、使えるんだけどね。考えた人はすげぇ天才！って思うんだけど、何がダメってAndroid(2.3〜4.0.3)がクソすぎた。 参考記事に書いてあるやり方をiPhoneで動くように修正すると以下。 CSS @media only screen and (max-width: 640px) { html::after { content: 'x-small'; display: none; } } document.defaultView.getComputedStyle
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
スマートフォン・タブレット・PCの場合の条件分岐(JavaScript)
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
lab » Blog Archive » [javascript] アンドロイドのバージョン判別方法
こちらの記事で使用していたプラグインjquery.touchSwipe-1.2.4がAndroidの2.2以下のバージョンに対応していないので、それを下回るバージョンをjavascriptで振り分ける処理を書きました。備忘録。 ヘッダ、または共有しているjsファイルに下記を記述。 function lowerAndroid(n) { var bo = false; var ua = navigator.userAgent.toLowerCase(); var version = ua.substr(ua.indexOf('android')+8, 3); if(ua.indexOf("android")) if(parseFloat(version) こんな感じで呼び出します。 var bo = lowerAndroid(2.2); alert(bo);//2.2（含まない）以下はtru
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
