web-dev-qa-db-ja.com

タッチデバイス用にWebサイトを最適化する

IPhone/iPad/Androidのようなタッチデバイスでは、指で小さなボタンを押すのが難しい場合があります。私が知っているCSSメディアクエリを使用してタッチデバイスを検出するクロスブラウザの方法はありません。そこで、ブラウザがjavascriptタッチイベントをサポートしているかどうかを確認します。 これまで、他のブラウザはサポートしていませんが、最新のGoogle Chrome devチャンネルで 有効なタッチイベント （非タッチデバイスでも）。タッチスクリーンを搭載したラップトップが登場しているため、ブラウザメーカーが続きます。。 更新：Chromeのバグであったため、JavaScriptの検出が再び機能するようになりました。

これは私が使用するテストです：

function isTouchDevice() {
    return "ontouchstart" in window;
}

問題は、これはブラウザーがデバイスではなくタッチイベントをサポートしているかどうかのみをテストすることです。

タッチデバイスのユーザーエクスペリエンスを向上させるThe Correct [tm]の方法を知っている人はいますか？スニッフィングユーザーエージェント以外。

Mozillaには、タッチデバイス用のメディアクエリがあります。しかし、私は他のブラウザでそのようなものを見ていません： https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

更新：モバイル/タッチデバイス用に別のページ/サイトを使用しないようにしたい。このソリューションでは、JavaScriptからオブジェクト検出などを使用してタッチデバイスを検出するか、ユーザーエージェントのスニッフィングを行わないカスタムタッチCSSを含める必要があります。 私が尋ねた主な理由は、css3ワーキンググループに連絡する前に、それが今日可能でないことを確認することでした。そのため、質問の要件を遵守できない場合は回答しないでください;）

javascriptjavascript-eventscss3usabilitytouch
66
gregers

次のシナリオをカバーするために、タッチスクリーン対応オプションが必要なようです。

  1. iPhoneのようなデバイス：小さな画面、タッチのみ
  2. 小さな画面、タッチなし（これについては言及しませんでした）
  3. 大画面、タッチなし（つまり、従来のコンピューター）
  4. IPad、タッチスクリーン付きノートブック/ PCなどのタッチスクリーン対応の大画面。

ケース1と2の場合は、おそらく別のサイトまたは多くの不要なコンテンツを排除し、より大きく、読みやすく、ナビゲートしやすいCSSファイルが必要になります。ケース＃2に関心がある場合、ページ上のリンク/ボタンがキーボード操作可能である限り、ケース1と2は同等です。

ケース3では、通常のWebサイトがあります。ケース4の場合、クリック可能なものを大きくするか、タッチしやすくしたいようです。すべてのユーザーのためにすべてを単純に大きくすることができない場合は、代替スタイルシートを使用して、タッチフレンドリーなレイアウトの変更を行うことができます。

最も簡単な方法は、ページのどこかにタッチスクリーン版のサイトへのリンクを提供することです。 iPadなどの有名なタッチデバイスの場合、ユーザーエージェントをスニッフィングし、タッチスタイルシートをデフォルトとして設定できます。ただし、これをすべてのユーザーのデフォルトにすることを検討します。 iPadでデザインが見栄えがよければ、どのノートブックでも容認できるほど見栄えが良いはずです。星よりも低いクリックスキルを持つマウスユーザーは、特に適切な:hoverまたはmouseover効果を追加して、クリック可能なことをユーザーに知らせる場合、より大きなクリックターゲットを見つけることができます。

ユーザーエージェントを盗聴したくないと言ったことは知っています。しかし、現時点では、これをサポートするブラウザーの状態は流動的であり、それを行うための「正しい」方法を心配することはできません。ブラウザーは最終的に必要な情報を提供しますが、この情報が遍在するのは何年も前になるでしょう。

22
Mr. Shiny and New 安宇

良いニュースです！ CSS4 Media Queries のエディタードラフトには、新しいメディア機能 ' pointer 'が含まれています。

「ファイン」ポインティングシステムの典型的な例は、マウス、トラックパッド、またはスタイラスベースのタッチスクリーンです。指ベースのタッチスクリーンは「粗い」とみなされます。

/* Make radio buttons and check boxes larger if we
   have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

JavaScriptからメディアクエリをテストすることもできます。

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

2月11日更新2013Windows 8では、Chrome（バージョン24+）の最新バージョンは、アプリケーションの起動時にタッチハードウェアを検出し、タッチイベントを公開します。残念ながら "pointer：coarse "はfalseを返します。ポインターメディアクエリが実装されていないのか、それとも細かいポインターがあるのか​​を知る方法がありません。WebKit 実装されていない " pointer：fine "なので、できるどちらかを確認してください。

9月26日更新2012iOS6のSafariでテストし、Chrome on Android 4.1.1で、まだありません。「ポインタ」と「ホバー」メディアクエリ WebKitに上陸 5月30日。User-Agentによると、SafariはWebKitブランチを使用します 536.26 4月25日から、Chrome on Androidはさらに古いもの（535.19）を使用します。User-Agent文字列からのWebKitブランチが信頼されるかどうかは不明ですが、私の テストページ はそうではありません 5月からの実装 は、タッチデバイス用のポインターメディアクエリのみを実装するため、pointer：fineはマウスを備えたデバイスでは機能しません。

14
gregers

Mozillaのような標準化されたメディアクエリがそれ自体で問題を解決するかどうかはわかりません。あなたがリンクした議論でChromium開発者の一人が言ったように、ブラウザにタッチイベントのサポートがあるからといって、タッチイベントが発動する、発動する、あるいは発動したとしても、ユーザーはタッチ入力を介してのみ対話したいという意味ではありません。同様に、デバイスにタッチ入力サポートがあるからといって、ユーザーがその入力方法を使用するわけではありません。おそらく、デバイスはマウス、キーボード、タッチ入力をサポートし、ユーザーはマウスまたは3つの入力タイプの組み合わせを好みます。

タッチイベントのサポートはブラウザのバグではなかったというChromium開発者に同意します。優れたブラウザは、タッチ入力をサポートするデバイスにインストールされる可能性があるため、タッチイベントをサポートする必要があります。ユーザーがタッチを介して対話することを意味するためにイベントサポートを利用したのは、Webサイト開発者のせいです。

次の2つのことを知る必要があるようです：（1）デバイスでサポートされているすべての入力タイプは何ですか（2）ブラウザでサポートされているすべてのイベントタイプは何ですか

私たちは今＃1を知らないので、私が好きなquirksmodeのPPKによって提案された1つのアプローチがあります。彼はここでそれについて話します： http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

基本的に、タッチイベントとマウスイベントをリッスンし、それらが発生したら、それに応じてUIを設定します。明らかにそれは開発者に限定されています。インタラクションがUIを変更するのを待ちたくないため、リンクサイズの問題に対する有効なアプローチではないと思います。全体的なポイントは、相互作用が発生する前に異なるUI（より大きな/より小さなリンク）を提示することです。

あなたがあなたの提案をして、CSS3に含まれることを願っています。それまでは、それを言うのは苦痛ですが、ユーザーエージェントのスニッフィングは最良のアプローチのように見えます。

追伸誰かがここに来て、私が間違っていることを証明することを願っています

3
Michael Hixson

Google Chromeには タッチイベントを有効にするためのコマンドラインスイッチ があります。 デフォルトでは無効になっています。したがって、すべてのユーザーに対して再び有効にするまで（できればうまくいかない）、質問で説明したようにjavascriptの助けを借りてタッチを検出することができます。。

2010年6月3日更新： これは実際には2010年5月25日に安定版になりました:(それが間違いであるかどうかはわかりません。

W3cメーリングリストでこの問題を議論しましたが、すぐに何かが起こるとは思いません。 http://lists.w3.org/Archives/Public/www-style/2010May/0411.html 11月のTPACでこれについて議論するかもしれません。

2010年9月30日更新：Chrome 6.で修正されたと思われます。6.安定版にダウングレードする時間がありません。 Chromeは自動的にアップグレードされるため、この問題はすでに解消されているはずです:)

メディアクエリの使用を検討している場合は、これをお読みください： http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ および http ：//www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

2011年5月16日更新：W3Cは Touch Events仕様 に取り組んでいますが、 多かれ少なかれ拒否されました 端末のTouchイベントを非表示にしますタッチハードウェアなし。そのため、タッチイベントの検出が長時間機能するとは思わないでください。

2012年6月6日更新：W3C CSS4 Media Queries（Editors Draft）仕様には、非常に興味深いものがあります。これについては、私の 個別の回答 をご覧ください。

3
gregers

いいえ、そのようなことはありません。 CSSには画面サイズオプションがあり、レイアウトを最適化できますが、それだけです。もあります media="handheld"しかし、それはあなたの要件にも適用されません。

機能検出はjavascriptを使用して機能する場合がありますが、デバイスごとに異なるイベントに問題があります。 PPK（quirksmode.orgの背後にいる人）は、各モバイル/ハンドヘルドデバイスで使用可能なjavascriptを確認するために膨大な量の作業を行っています。タッチラップトップデバイスの要件。
（正直なところ、まだ出ていないデバイスについて心配している理由がわからないので、実用化して、ここに来たらテストすることができます）

PPKのモバイルブラウザおよびタッチイベントでの作業により、時間を節約できます。それを確認してください こちら

2
Dave Gregory

テーブルを使用して、完全なセルをリンクにしてみてください...私は自分のウェブサイトでそれを取り組んでいます...今のところうまくいきません...しかし、あなたは方法を見つけるかもしれません...この方法で、いいえJavaScriptと機能の検出を使用してWebサイトをオーバーロードする必要があります...固定サイズの相対サイズを与えることができます...この方法で、iPhoneで表示されているようにデスクトップでWebサイトを表示できます...この考えを考えてみてください...どんな疑いも軽減されます...

0
Ismael Miguel

Appleには iPhone OSのみに定義されているTouchEvents FWIWがあります

0
Divya Manian

完全な解決策ではありませんが、小さなボタンはまったく使用しないでください。小さなボタンはタッチデバイスでは使いやすさの問題ですが、大きな画面やマウスを使用する場合でも、常に使用するのは困難です。

間に十分なスペースがある適切な大きなボタンの使用に注意を払うだけで、誰もが恩恵を受けるでしょう。加えて、あまりにも多くの小さなボタンでインターフェースが乱雑にならないようにします:-)。

0
sleske

Chromeでpointer：fineを追加するためのサポートについては、 http://crbug.com/136119 を参照してください。実際には、pointer：coarseがサポートされているかどうかを検出できます（未設定とサポートされていないを区別するため）-メディアクエリを自分で作成し、javascriptで正しく解析されるかどうかをテストします。

たとえば、今日のChromeに表示される@media（pointer：coarse）]：

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

しかし、「@ media（pointer：other）」のようなサポートされていない偽の値はそうではありません：

> document.styleSheets[0].rules[8].media[0]
"not all"
0
Rick Byers