描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
Androidでoverflowした要素をスクロール可能にするjQueryプラグイン - (・肉・)ブログ
Androidでoverflowするとスクロールできない問題を解決するためにつくりました。 ソースコード https://github.com/yosukedoke/JSOverflowScroll 使い方 #hoge { overflow:auto;//Androidは強制的にhidden的な挙動になる width:320px; height:400px; } $("#hoge"). overflowScroll(); iOSでもoverflowを設定すると慣性スクロールが効かなくなるので有用かもしれませんが、 よほどでなければUAを判定してAndroidだけ適応するほうがいいと思います。 仕組み touchStartで取得したポイントをと現在の指の位置の差分をscrollTopに設定しているだけです。 模式的に書くと次のようなかんじです。 タッチ開始 $target.on("touch
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
固定ポジションモード | jQuery Mobile 1.1.0 日本語リファレンス
固定ポジションツールバー CSSの position:fixed をサポートしているブラウザ(ほとんどのデスクトップブラウザ、iOS5以降、Android2.2以降、BlackBerry6など)では、“fixedtoolbar“プラグインが使われます。これにより、ヘッダやフッタとしてツールバーをページ上下に固定することが出来、コンテンツはその間を自由にスクロールさせられます。この固定機能をサポートしていないブラウザでは、バーの表示位置は固定されず、通常の配置と同様になります。 固定モードを有効にするには、ヘッダやフッタに data-position=“fixed” という属性を指定してやります。 <div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div> 固定フッタであれば、次のようにします。
UI設計におけるスマートフォン対応のまとめ
2. スマートフォンにおけるバグおよび問題まとめ ・共通 ・Android ・iOS - イベントバブリング対応 - CSS アニメーションが遅い - position:fixed のバグ - 端末画面サイズへの対応 - text-shadow バグ - Flash の問題 - CSS3 アニメーション＋box-shadow 問題 - jQuery アニメーション - scroll ができない のメモリリーク - z-index が効かなくなる - 下層レイヤーが反応する - フォントが無い - font-weight:bold が使えない - フォーカスがずれる件 - translate3d によるバグ - touchend イベントが発生しない - select や input[type=text] フォーカス時の挙動 - mask-image＋アニメーション問題 - ... - 端末依
スマートフォンにおけるHTML5対応状況 (1) - 30分で学ぶ「mixiアプリ for touch」（スマートフォン版mixiアプリ）の作り方
今回はmixiアプリ for Touch限定ではなく、スマートフォンにおけるHTML5の対応状況について。 まず、基本的にiPhone・Android共に標準のブラウザではWebkitを描画エンジンとして用いており、共通する仕様が非常に多いです。 それらはSafari・Google Chromeを使ってご存じの方も多いかと。 webkitと言えば常に新しい規格を作り標準規格として採用された実績を持つブラウザ、HTML5の対応にも期待が持てます。基本的にhtml5の技術は進んでバリバリ使ってOKと考えましょ。 ただ、XPERIAはAndroid1.6ということで、現存するAndroid端末の中でもかなり古いため、webkitのバージョンが古いのでしょう。ちょっと心配な面もあります。 また、HTML5と言っても実はかなり広義にわたる意味を持っており、今までのXHTMLと違いCSSやJavaSc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）