0

モバイルが検出された場合、または解像度が 641px 未満の場合、div を読み込むことは可能ですか? デスクトップ用とモバイル用に異なるメニューがあります。モバイル メニューはイメージ svg スプライトを使用しますが、デスクトップの場合、HTTP 要求を保存するためにその svg イメージをロードしたくありません。メディア クエリに基づいて div を非表示にすることはできますが、少なくとも画像が読み込まれないようにするにはどうすればよいでしょうか。または、モバイル用の完全なメニュー div のみを読み込むにはどうすればよいでしょうか? これに対する最善のアプローチは何ですか？

4

3 に答える 3

2

特定の条件で画像が読み込まれないようにすることができます

$(document).ready( function() { 
  if(yourCondition){
    $("img").removeAttr("src");
  }
 });
于 2013-04-09T10:48:14.150 に答える
1

https://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect

上記のリンクを確認してください。 if else ステートメントで使用して、デバイスタイプに基づいて非表示の div を表示できます

<?php
// Written By Adam Khoury @ developphp.com - March 26, 2010
// PHP swapping CSS style sheets for target device layouts
// Make your index page of your site a .php file instead of .html
 $styleSheet = "default.css";
$agent = $_SERVER['HTTP_USER_AGENT']; // Put browser name into local variable

if (preg_match("/iPhone/", $agent)) { // Apple iPhone Device
// Set style sheet variable value to target your iPhone style sheet
   $styleSheet = "iphone.css";

} else if (preg_match("/android/", $agent)) { // Google Device using Android OS
// Set style sheet variable value to target your Android style sheet
$styleSheet = "android.css";

}
?>

上記のコードは単にhttp://www.developphp.com/view_lesson.php?v=310から取得したものです。必要に応じて完全なコードを確認してください。

于 2013-04-09T10:44:33.343 に答える
0

あなたの最大の問題が、不要な場合に一部の画像を読み込まないようにすることである場合は、メディアクエリを使用することをお勧めします. 異なる css ファイルを読み込む場合 (メディアによって異なります)、必要な画像を「background-image:」として追加できます。これは SVG Spite でも機能するはずです。

アスペクト比とスケーラビリティを維持しながら SVG スプライト シートを CSS 背景画像として使用する方法

于 2013-04-09T12:04:27.433 に答える