スマートフォンのブラウザーでの表示や操作に関する記事です。
タグ
#スマートフォン
記事 (7 件)
- data URI で小さな画像を埋め込む ── スマートフォンで効いた理由と今の使いどころ data URI で小さな画像を CSS や HTML に埋め込む書き方と、回線の遅いスマートフォンで効果が大きかった理由、サイズやキャッシュの欠点、HTTP/2 以降での使いどころを説明します。
- メディアクエリの orientation は、端末の向きではなく表示領域の形で決まる メディアクエリの orientation は、端末の向きではなくビューポートの幅と高さで決まります。デバッグ用の表示やキーボードで縦向きのまま landscape になる理由と、端末の向きの調べ方、今の iPhone のデバッグ方法を説明します。
- タップの反応が遅い ── モバイルブラウザーの 300 ミリ秒の遅れと今の対策 かつてのモバイルブラウザーでは、タップしてから click イベントが起きるまで約 300 ミリ秒の遅れがありました。遅れの理由、昔の回避策の問題点、viewport や touch-action を使った今の対策と、連打への備えを説明します。
- 「タッチ端末かどうか」ではなく、入力の種類で表示や処理を分ける 'ontouchstart' in window などでタッチ端末かどうかを判定する方法の問題点と、CSS の hover・pointer・any-pointer メディア特性、matchMedia、Pointer Events の pointerType を使って入力の種類ごとに分ける今の方法を説明します。
- スマートフォンの Web で音を鳴らす方法のまとめ スマートフォンのブラウザーで音を鳴らす方法を、audio 要素と Web Audio API の使い分け、自動再生のポリシー、対応する形式、iOS の音量の制限、マナーモードとの関係、かつての Flash との違いに分けて整理します。
- iOS 5 の position: fixed から考える、スマートフォンの固定表示とスクロール iOS 5 の Safari で position: fixed と、要素の中の 1 本指のスクロールが使えるようになったことを入口に、今のスマートフォン向けの固定表示とスクロールの書き方 (sticky、dvh、safe-area) を説明します。
- 画面の向きの変化を知る ── orientationchange から screen.orientation へ スマートフォンの画面の向きが変わったことを JavaScript で知る方法を、昔の orientationchange イベントと window.orientation の問題、今の screen.orientation、matchMedia、resize を使った書き方、CSS で済ませる考え方に分けて説明します。