iPhone、iPad、Androidなどのタッチデバイスでは、小さなボタンを指で押すのが難しい場合があります。私が知っているCSSメディアクエリでタッチデバイスを検出するためのクロスブラウザーの方法はありません。そのため、ブラウザーがJavaScriptタッチイベントをサポートしているかどうかを確認します。 これまで、他のブラウザはそれらをサポートしていませんでしたが、開発チャネルの最新のGoogle Chromeは タッチイベントを有効にしました （非タッチデバイスでも）。タッチスクリーンを搭載したラップトップが登場するので、他のブラウザメーカーもそれに続くと思い ます。更新：これはChromeのバグだったため、JavaScriptの検出が再び機能するようになりました。
これは私が使用するテストです：
function isTouchDevice() {
return "ontouchstart" in window;
}
問題は、ブラウザーがデバイスではなくタッチイベントをサポートしているかどうかのみをテストすることです。
タッチデバイスのユーザーエクスペリエンスを向上させる正しい方法を知っている人はいますか？ユーザーエージェントを盗聴する以外。
Mozillaにはタッチデバイス用のメディアクエリがあります。しかし、私は他のブラウザでそのようなものを見たことはありません：https : //developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled
更新：モバイル/タッチデバイス用に別のページ/サイトを使用しないようにしたい。このソリューションでは、JavaScriptからオブジェクト検出または類似のタッチデバイスを検出するか、ユーザーエージェントをスニッフィングせずにカスタムタッチCSSを含める必要があります。私が尋ねた主な理由は、css3ワーキンググループに連絡する前に、それが今日不可能であることを確認することでした。ですから、質問の要件に従っていない場合は答えないでください;）
次のシナリオをカバーするために、タッチスクリーン向けのオプションが必要なように思えます。
ケース1と2の場合は、多くの不要なコンテンツを排除し、物事を大きくして読みやすくするために、別のサイトまたはCSSファイルが必要になる可能性があります。ケース＃2に関心がある場合は、ページのリンク/ボタンがキーボードでナビゲートできる限り、ケース1と2は同等です。
ケース3の場合は、通常のWebサイトがあります。ケース4の場合、クリック可能なものを大きくしたり、触れやすくしたりする必要があるようです。すべてのユーザーにとってすべてを単純に大きくすることが不可能な場合は、別のスタイルシートを使用して、タッチフレンドリーなレイアウトを変更できます。
最も簡単な方法は、ページのどこかにあるサイトのタッチスクリーンバージョンへのリンクを提供することです。iPadなどのよく知られているタッチデバイスの場合、ユーザーエージェントを嗅ぎ、タッチスタイルシートをデフォルトとして設定できます。ただし、これを全員のデフォルトにすることを検討します。あなたのデザインがiPadでよさそうだとすれば、どんなノートブックでも容認できるほどよさそうだ。特にクリック:hoverやmouseoverクリックが可能であることをユーザーに知らせるために適切なエフェクトやエフェクトを追加した場合は、クリックのスキルがそれほど高くないマウスユーザーが大きなクリックターゲットを見つけて喜んでくれます。
ユーザーエージェントをスニッフィングしたくないと言っていましたね。しかし、現時点では、これに対するブラウザのサポートの状態は流動的すぎて、「正しい」方法でそれを行うことができないと考えています。ブラウザーは最終的に必要な情報を提供しますが、この情報がユビキタスになるまでには数年かかるでしょう。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加