desktop - ブラウザのスニッフィングなしで、デスクトップとタブレットの 1000 ピクセルの画面サイズを区別する方法は?

Question

私のサイトのデスクトップ版では、多くのトランジション、ホバー、およびシャドウ効果を使用しています。メディアクエリでできると思っていたタブレットバージョンでそれらを取り除く必要がありますが、私の問題は、@media only screen and (min-width : 1224px) のようなものを使用してデスクトップをターゲットにし、ユーザーが必要とする場合ですブラウザ ウィンドウが最大化されるか、タブレットを対象とした CSS が取得されます。したがって、デスクトップ ユーザーのブラウザーが 1000px の場合、iPad のユーザーと同じ CSS を取得します。ブラウザ スニッフィングは信頼できないと言われましたが、1000 ピクセルのデスクトップ ブラウザと 1000 ピクセルのタブレット デバイスを使用しているユーザーを他にどのように区別できますか?

Answer 1

body {
  background-color: #bada55
}


/* Regular media queries for a smaller desktop */
@media only screen 
and (min-device-width : 768px) 
{
/* Add styles here */
} 



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Add styles here */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Add styles here */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Add styles here */
} 

jsbinの例を確認してください-http ://jsbin.com/uxipeh/1/およびオプションの完全なリストはこちら