スマートフォンのブラウザー向けの Web の話題を扱います。タッチ操作への反応、画面の向きの判定、音声の再生の制限、メモリの扱いなど、パソコンとは違う点が中心です。
カテゴリー
スマートフォン向けの Web
記事 (12 件)
- data URI で小さな画像を埋め込む ── スマートフォンで効いた理由と今の使いどころ data URI で小さな画像を CSS や HTML に埋め込む書き方と、回線の遅いスマートフォンで効果が大きかった理由、サイズやキャッシュの欠点、HTTP/2 以降での使いどころを説明します。
- メディアクエリの orientation は、端末の向きではなく表示領域の形で決まる メディアクエリの orientation は、端末の向きではなくビューポートの幅と高さで決まります。デバッグ用の表示やキーボードで縦向きのまま landscape になる理由と、端末の向きの調べ方、今の iPhone のデバッグ方法を説明します。
- タップの反応が遅い ── モバイルブラウザーの 300 ミリ秒の遅れと今の対策 かつてのモバイルブラウザーでは、タップしてから click イベントが起きるまで約 300 ミリ秒の遅れがありました。遅れの理由、昔の回避策の問題点、viewport や touch-action を使った今の対策と、連打への備えを説明します。
- スマートフォンで音声を再生・シークできないときは、配信のしかたを疑う 音声ファイルが再生できない、途中から再生できないといった問題は、ブラウザーではなく配信する側が原因のことがあります。Range リクエストと 206 Partial Content、Content-Type、PHP で返すときの注意と、curl での確かめ方を説明します。
- iPhone の Safari で音を鳴らすときの制限と対処 iPhone の Safari で音を鳴らすときに知っておきたい制限 (タップがきっかけでないと再生できない、volume を変えられない、audio 要素を重ねにくい) と、Web Audio API を使った対処、play() の失敗の捕まえ方を説明します。
- Android のブラウザーで音声を再生する ── 自動再生の決まりと対応形式 Android のブラウザーで音声を再生するときの考え方を、昔の機種ごとの違いと今の状況、自動再生のポリシー、対応する形式と canPlayType() での確かめ方、audio 要素に複数の source を書く方法に分けて説明します。
- 「タッチ端末かどうか」ではなく、入力の種類で表示や処理を分ける 'ontouchstart' in window などでタッチ端末かどうかを判定する方法の問題点と、CSS の hover・pointer・any-pointer メディア特性、matchMedia、Pointer Events の pointerType を使って入力の種類ごとに分ける今の方法を説明します。
- スマートフォンの Web で音を鳴らす方法のまとめ スマートフォンのブラウザーで音を鳴らす方法を、audio 要素と Web Audio API の使い分け、自動再生のポリシー、対応する形式、iOS の音量の制限、マナーモードとの関係、かつての Flash との違いに分けて整理します。
- 音声の再生は、利用者の操作の中で始める 音声の再生が許されるのは、タップなどの操作に続く処理の中だけです。どこまでが操作に続く処理と見なされるのかを、ユーザーアクティベーションの仕組みと navigator.userActivation を使って説明し、確実に音を出せる書き方を紹介します。
- 画像をたくさん読み込むとスマートフォンのブラウザーが落ちる理由と対策 JavaScript で大量の画像や大きな画像を読み込むと、スマートフォンのブラウザーが落ちることがあります。原因になる画像のメモリの使い方 (幅 × 高さ × 4 バイト) と、srcset・遅延読み込み・参照の解放などの対策を説明します。
- 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 で済ませる考え方に分けて説明します。