1

私はメディアクエリを使用していますが、残念ながら、ユーザーエージェント（Google、Facebook、その他のサイトなど）の決定において、モバイルデバイス専用の単純な「モノリシック」バージョンのサイトよりも劣っています。サイト全体をメディアクエリに翻訳したので、特別なバージョンはやりたくありません。結論として、この方法には、携帯電話の所有者にとって重要な重量読み込みページの点で柔軟性がありません（私たちの国では、モバイルインターネットは依然として非常に高額であり、画像はパフォーマンスを低下させます）。私はJavascriptを使用するという考えを成熟させました。これにより、ブラウザーが特定のルール（画面解像度など）で画像をロードできなくなります。あなたはどう思いますか-実際に実現されています、すでに実装されている可能性がありますか？多くの賢い人がこのサイトを訪れていることを知っています。この分野での貴重な経験をあなたから聞いてみたいです！

英語が下手でごめんなさい。

更新： 画像が読み込まれないようにする

4

1 に答える 1

1

この質問には、いくつかの可能な解決策があります。以下に一般的な3つをリストします。

古いブラウザーを気にしない場合は、CSS のみのソリューション、javascript ソリューション、および HTML5 ソリューション:

CSS

画像をスタイル タグに移動し、メディア クエリを使用して適切な画像を表示することをお勧めします。

<style>
/* mobile first */
.img {
    display:none;
}

/* tablet */
@media (min-width:600px) {
    .img {
        background:url('/path/to/image-tablet.png') no-repeat scroll 0 0 transparent;
    }
}

/* desktop */
@media (min-width:1280px) {
    .img {
        background:url('/path/to/image-large.png') no-repeat scroll 0 0 transparent;
    }
}
</style>

<div class="img"></div>

これが動的な Web ページであると仮定すると、css ファイルではなくタグ付きのページに css を含めstyleます。

HTML5

完全なブラウザー カバレッジ ( canIuse ) を気にしない場合は、新しい HTML5picture要素を使用することもできます。

<picture>
  <source 
    media="(min-width: 1280px)"
    srcset="/path/to/image-large.png">
  <source 
    media="(min-width: 600px)"
    srcset="/path/to/image-tablet.png">
  <img src="/path/to/image-mobile.png" /> <!-- a 1x1 empty pixel -->
</picture>

この例では、モバイル ブラウザとそれをサポートしていないブラウザがimgタグを読み込みます。他のブラウザーは、メディア クエリに適した画像を読み込みます。

このソリューションが好きで、古いブラウザーでも動作するようにしたい場合は、ブラウザーがサポートしていない場合に機能を実装する JS スクリプトを見つけることができます。

Javascript

このアプローチは私にとって最もハックに感じますが、それは私の意見です。IE は 10 以降、このメソッドをサポートしており、非常に大きなブラウザー カバレッジを持っています。

属性なしでイメージ タグを作成しsrc、イメージ サイズ バージョンをdata属性として作成します。

<img data-tablet="/path/to/tablet.png" data-desktop="/path/to/large.png" />

<script>
var $el = jQuery('img');
if(window.matchMedia("(min-width: 600px)").matches) {
    $el.attr('src', $el.data('tablet'));
}
if(window.matchMedia("(min-width: 1280px)").matches) {
    $el.attr('src', $el.data('desktop'));
}
</script>

jQuery を使ってデモを行いましたが、重要な部分はwindow.matchMedia. これはメディアクエリのようなチェックを行い、ブール値を返します。

于 2015-09-04T15:28:12.203 に答える