这是我在这里的第一个问题,所以如果它不是正确的形式,我会道歉。我不知道为什么但是我的台式电脑上的图像工作得非常好,但在我的移动设备中却不合适。我使用了chrome的移动模拟器,它也可以正常工作。但不是真正的移动设备。
请帮助:(
答案 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.'">';
通过为图像指定一个类,您现在可以根据设备控制具有该指定类的所有图像上的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
})