图像忽略移动中具有基础网格的结构

时间:2015-06-30 14:50:31

标签: html css zurb-foundation

这是我在这里的第一个问题,所以如果它不是正确的形式,我会道歉。我不知道为什么但是我的台式电脑上的图像工作得非常好,但在我的移动设备中却不合适。我使用了chrome的移动模拟器,它也可以正常工作。但不是真正的移动设备。

请帮助:(

1 个答案:

答案 0 :(得分:0)

有很多种可能性......

如果不查看代码,或了解所用设备的操作系统,则无法提供准确的答案。

但是,我在开箱即用时遇到类似基金会的问题...不确定原因。在我的应用程序中,我的up-loader重新调整每个图像的大小,并将它们存储在小型,中型和大型文件夹中。因此,我需要根据设备精确控制要加载的图像。

我想出了下面的系统,允许根据设备应用CSS:这可能会也可能不能解决您的问题。

移动侦测

我去here获取移动侦测,我识别出使用的设备。

调用移动侦测的代码

这会调用检测脚本并将设备大小分配给变量:$thisImg

# mobile detect
    require_once ($level.'core/ini/mobile-detect.php'); 
    $detect = new Mobile_Detect; $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
    if($layoutType == 'mobile'){$thisImg = 'small';} 
    elseif($layoutType == 'tablet'){$thisImg = 'medium';} 
    elseif($layoutType == 'classic'){$thisImg = 'large';}   

存储设备大小

要存储设备大小,我使用ID为img_sizer

的隐藏输入

echo '<input type="hidden" id="img_sizer" value="'.$this_img.'">';

的jQuery

通过为图像指定一个类,您现在可以根据设备控制具有该指定类的所有图像上的CSS,并可以通过jQuery管理各种图像类。

$('img.respond').each(function(){
  var which_size = $('#img_sizer').val(); // my hidden input         
  if(which_size == 'small'){$(this).addClass( "text-center" );} // add center class for small
})

确定文件夹路径

在我的应用程序中,我使用以下jQuery为图像源分配正确的文件夹路径。代码来自Stack here

$('img.respond').each(function(){
    var which_size = $('#img_sizer').val(); // my hidden input
    var msrc=$(this).attr('src');
    msrc=msrc.split('/');     //images, services, image.jpg
    var lastelem = msrc.pop();  //images, services     // lastelem: image.jpg
    msrc.push(which_size);     //images, services, large   // lastelem: image.jpg 
   msrc.push(lastelem);    //images, services, large, image.jpg
   msrc=msrc.join('/');  //"images/services/large/image.jpg"
   $(this).attr('src', msrc);
   if(which_size == 'small'){$(this).addClass( "text-center" );} // add center class for small
 })