僅使用javascript為移動設備加載div

Question

如果檢測到移動設備或分辨率低於641px，是否可以加載div？ 我有不同的桌面和移動菜單。 移動菜單使用圖像svg精靈，但對於桌面我不希望加載svg圖像來保存HTTP請求。 我可以根據媒體查詢隱藏div，但是我怎樣才能至少阻止圖像被加載，或者只為移動設備加載intire菜單div？ 對此最好的方法是什么？

Answer 1

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

檢查上面的鏈接，你可以在if else語句中使用它來顯示基於設備類型的hide 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中獲取 ，如果需要，請查看完整代碼。

Answer 2

您可以阻止圖像在某些條件下加載

$(document).ready( function() { 
  if(yourCondition){
    $("img").removeAttr("src");
  }
 });

Answer 3

如果您最大的問題是如果不需要加載一些圖像，我建議繼續使用媒體查詢。 如果您加載不同的css文件（取決於媒體），您可以將所需的圖像添加為“background-image：”。 這也適用於SVG Spite。

如何在保持寬高比和可伸縮性的同時將SVG Sprite Sheet用作CSS背景圖像