フルカバーの背景を使用する Web サイトにいくつかの CSS コードを実行しており、解像度の異なる複数のデバイスにメディア クエリを使用して提供したいと考えています。
私はすでに、これを行うすべての iPhone と iPad でそれを行う方法を理解しています。
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPhone 2G/3G/3GS */ }
@media only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 4/4S */ }
@media only screen and (min-device-width:560px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 5 */ }
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPad 1/2 and iPad mini */ }
@media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPad 3/4 */ }
一部のデスクトップ画面の場合:
@media only screen and (min-device-width:1280px), only screen and (min-device-width:1366px), only screen and (min-device-width:1440px) { /* some regular desktop resolutions */ }
@media only screen and (min-device-width:1680px), only screen and (min-device-width:1920px) { /* some larger desktop resolutions, likely hd screens */ }
このすべてのメディアクエリの目的は、それぞれでこの css ルールを使用して完全なカバーの背景のみ@mediaを満たすことであるため(明らかに、異なる画像を使用して、サーバーの負荷を軽減し、デバイス間の仕様を考慮してフレンドリーな背景を表示します)...
html {
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;}
Retinaスクリーン(特に Macbook Pro Retina、13 インチおよび 15 インチ モデル) でこれを行うことに疑問があります。
上記と同じロジックを使用すると、これは次のようになるはずです。
@media
only screen and (min-device-width:2560px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2560px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (min-device-pixel-ratio: 2) { /* for the 13inch model */ }
@media
only screen and (min-device-width:2880px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2880px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (min-device-pixel-ratio: 2) { /* for the 15inch model */ }
だから...これがこのように機能することを願っています。
また、これを改善するためのアドバイスをお願いします。主な考え方は、サーバーとクライアント側 (この場合はブラウザー) の両方の過負荷を避けるために、ディスプレイの解像度とデバイスごとに異なる画像が提供されるということです。