0

手にトリッキーな小さなバグがあります。

このページを検討してください。段落に付随する画像はすべてスプライトから呼び出され、ビューポートが縮小されると、レスポンシブ デザインのさまざまなレイアウトに対応するためにさまざまな背景位置が呼び出されます。

ブラウザー テストでは、すべてのビュー/デバイスは、IE<9 とiOS (付随するインスペクター ビュー)を除いて、すべてのデバイス/ブラウザーに重大なバグを提供しません。何らかの理由でiOSデバイス(同じビュー/幅がデスクトップに正しく表示される) が、これらの div に何も表示されないようです。Inspector はエラーをスローせず、ネットワーク タイマーはスプライトが実際に読み込まれたことを示します。

プロットを厚くするために、直接 URL を呼び出すと、iOS サファリでスプライトを読み込むことができます。パーマはすべての画像アセットで 755 に設定されており、さまざまな dom 要素 (div、span、p、i) と背景技術 (つまり、宣言、および逆に a&nbsp;を含む) を使用してみました。<div>content: '';content: ' ';

これは、Mac/Win Chrome/Firefox/Safari、Android デバイス、iPhone4/5、iPad (iOS6) でテスト済みです。背景の div が (少なくとも私のハードウェアでは) 表示されないデバイスは、iPhone と iPad です。

誰でもこれについて洞察を持っていますか？

4

3 に答える 3

1

モバイルSafariにはバグがあり、合計解像度が2,000,000ピクセルを超えるCSS背景画像がまったく表示されないようになっています。2010年のブログ投稿では、これについて詳しく説明しています。私の知る限り、それは決して修正されませんでした。背景画像を表示するには、背景画像を小さくするか（合計ピクセル数で）、2つ以上のスプライトに分割する必要があります。私は間違いなくこれが以前に起こったことを見たことがあります。唯一の修正は、画像を小さくすることでした。ファイルサイズではなく、ピクセル単位です。

于 2013-02-26T01:57:09.500 に答える
1

かわいいサイト。

問題は、Tiny Couch が非常に巨大なスプライトを収容していることです。300kb 強しかありませんが (それでもかなり大きい)、処理できないことを意味するサイズである可能性があります。

http リクエストが 1 つしかないことを意味するスプライトを使用してサービスを提供しようとするアイデアが大好きですが、この場合、スプライトの下部は、モバイル デバイスで表示するときにのみ呼び出されます。デスクトップ スプライトとモバイル スプライトに分割し、適切なメディア クエリを使用してそれらをロードする価値があるかもしれません。

理由

于 2013-02-25T07:23:14.307 に答える
0

限度額は場合によって異なるようです。iOS 5.1.1 を搭載した iPhone 4 デバイスでテストしていますが、ファイル自体の制限は背景サイズほど重要ではないようです。背景に 1100px X 1000px を使用すると機能しません。しかし、background-size を 1000px X 1000px に設定すると動作します。

したがって、高 DPI(2x) バージョンの 2000px X 2000px を使用し、image-size を 1000px X 1000px に設定すると、背景自体が大きくても機能します。

そのため、デフォルトのスプライトに 1000px X 1000px を使用することをお勧めします。そうすれば、少なくとも 2xDPI を持つことができます。3回は試していません。

于 2014-03-18T09:12:07.377 に答える