前提
閲覧しているデバイスに基づいてコンテンツを配信するWebサイトでの作業。基本的に、サイトには2つのバージョンがあります。
- PC&タブレット版
- 携帯電話版
「PC&タブレット版」は、より高品質の画像と異なるサイトナビゲーション方法を提供します(ズームなしのグーグルマップを想像してください)。
モバイル版では、この「マップ」を垂直スクロールに制限しています。
どちらのバージョンもメタviewport
がに設定されていwidth=device-width, initial-scale=1.0, user-scalable=no
ます。
問題
一部のタブレットでは、報告されているデバイスの解像度が非常に低くなっています。例:Samsung Galaxy Tab 7 "は、メディアクエリでデバイス幅663pxを報告しますが、" PC&Tabletバージョン"では最小幅960pxが必要です。
それは本当に大きな電話です。
メディアクエリだけでは、サイトを適応させるのに十分ではありません。自然のような地図なので、サイトは固定幅にする必要があります。
解決策は、これらのタブレットに「電話バージョン」を配信することです。ただし、これはサーバー側で行う必要があります。
私が使用しているATM PHP Mobile Detect
。「大きな電話のタブレット」を「電話」リストに手動で追加することは可能です。苦痛で、タブレットの「cssレポート」の画面解像度のリストはどこにも見つかりません。
そのようなリストはどこかにありますか?または、(報告されたUserAgentに基づいて)サーバー側の画面サイズをクエリできる、維持されているphpライブラリもありますか?
クライアント側で画面サイズを確認し、必要に応じてサーバーの選択を修正して上書きすることもできます。しかし、私はこれを避けたいと思います。
PS:はい。これがレスポンシブデザインの政治的に正しい方法ではないことを私は知っています、私は選択の余地がありませんでした。