Question

如果检测到移动设备或分辨率低于641px，是否可以加载div？我有不同的桌面和移动菜单。移动菜单使用图像svg精灵，但对于桌面我不希望加载svg图像来保存HTTP请求。我可以根据媒体查询隐藏div，但是我怎样才能至少阻止图像被加载，或者只为移动设备加载intire菜单div？最好的办法是什么？

Answer 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获取，如果需要，请检查完整代码。

Answer 2

您可以阻止图像在某些条件下加载

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

Answer 3

如果您最大的问题是如果不需要加载某些图片，我建议继续使用媒体查询。如果您加载不同的css文件（取决于媒体），您可以将所需的图像添加为“background-image：”。这也适用于SVG Spite。

How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

仅使用javascript为移动设备加载div

3 个答案: