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

Question

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

请帮忙:(

Answer 1

有很多可能性...

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

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

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

移动检测

我去了here获取我识别所用设备的移动检测。

调用Mobile Detect的代码

这会调用检测脚本并将设备大小分配给变量:$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
 })