モバイル/タブレットデバイスがサポートしていないposition: fixed
(iOS5以降とAndroid3以降はありがたいことに)単一ページのサイトで厄介な問題が発生しています。UXにとって固定位置のメインナビゲーションが非常に重要です。
これに関するBradFrostsの優れた記事を読んだ後、私は彼のアドバイスを受けて、ユーザーエージェントスニッフィングを使用してiOSとAndroidをターゲットにし、固定のメインナビゲーションを表示し、他のすべてのモバイルデバイスでは表示しないことにしました。代わりに、それぞれの後にリンクを挿入します。フッターのメインナビゲーションへのメインセクション、素晴らしいではありませんが十分です。ただし、デスクトップメディアクエリでは、1024px +(サイト「モバイルファースト」を構築しています)デスクトップユーザーに固定メインナビゲーションを表示する必要がありますが、これは、SamsungGalaxyなどをサポートしていないがサポートしている多くのタブレットデバイスに影響しposition: fixed
ますCSSメディアクエリ。
ブラッドが指摘したのと同じ理由で避けたい、またはもっと厄介なユーザーに入るブラッドの記事で言及されているJavaScriptソリューションに入らずに、iOS/Android以外のすべてのタブレットデバイスを修正する簡単な方法はないようです。エージェントがスニッフィングしますが、これも避けたいと思います。少なくとも私はiOSとAndroidを動作させています。
編集:私ができることの1つは、デスクトップメディアクエリを1366px +に上げることです。これは、最も一般的なデスクトップ解像度のようです(ここを参照)。最大画面サイズは通常1280pxであるため、ほとんどのタブレットには影響しません。多くのデスクトップユーザーがブラウザのビューポートを縮小し、固定されたメインナビゲーションが表示されなくなり、サイトが使いにくくなるため、少し危険です。このユースケースはタブレットユーザーよりも優れていると思いますか?