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

Image ignores structure with foundation grid in mobile

这是我的第一个问题，如果格式不正确，我深表歉意。我不知道为什么，但图像在我的台式电脑上工作得很好，但在我的移动设备上却不合适。我使用了 chrome 的移动模拟器，它在那里也能正常工作。但不是在真正的移动设备中。

请帮忙:(

有很多可能性...

如果不查看您的代码，或者不了解所用设备的 OS，就不可能提供准确的答案。

但是，我在开箱即用的 Foundation 中遇到了类似的问题……也不知道为什么。在我的应用程序中，我的上传程序重新调整每个图像的大小并将它们存储在小、中和大文件夹中。因此，我需要根据设备精确控制要加载的图像。

我想出了下面的系统，它允许根据设备应用 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

通过为图像分配 class，您现在可以根据设备控制分配了 class 的所有图像上的 CSS，并且可以管理各种图像 class 通过 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
 })