Javascript 某些图片未显示在iphone布局上
该网站在iphone设备中显示图片时出现问题,通过水平最小化浏览器复制了该问题。Javascript 某些图片未显示在iphone布局上,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,该网站在iphone设备中显示图片时出现问题,通过水平最小化浏览器复制了该问题。 链接是否显示问题。 我的手动修复方法是缩小浏览器(ctrl+-),这是演示的链接 这是否可以通过html、css或javascript/jquery解决。 我已经为页面设置了响应标签: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这是图像div的html: <div class="c
链接是否显示问题。
我的手动修复方法是缩小浏览器(ctrl+-),这是演示的链接 这是否可以通过html、css或javascript/jquery解决。
我已经为页面设置了响应标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这是图像div的html:
<div class="col-md-3 col-sm-3 col-xs-6 fabric-box">
<a href="customize/fabric/<?php echo $x['hash'];?>/<?php echo $_SESSION['customize_mode'];?>">
<div class="image-holder fabric-image-holder">
<img data-src="<?php echo ap($x['thumb']);?>" class="lazy img-responsive" src="<?php echo $conf->bg;?>"></img>
</div></a>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h5 class="fabric-name pull-left"><a href="customize/option_item/<?php echo $x['id'];?>"><?php echo $x['name']?></a></h5>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 data-option-group="<?php echo $x['option_group_hash'];?>" data-toggle="tooltip" data-placement="top" title="" data-original-title="<?php echo $data_original_title;?>" id="wishlist-<?php echo $x['id']?>" class="wishlist-button pull-right">
<span class="glyphicon <?php echo $glyphicon;?>"></span>
</h4>
<a href="customize/option_item/<?php echo $x['id'];?>" class="btn btn-declothe-gray btn-xs">Details</a>
</div>
</div>
</div>
我在您的HTML代码中看到了几个问题,因此其中一个问题可能是阻止iPhone正确显示页面。
例如,您的标记应如下所示:
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398340678_midnight-b_RGjA.jpg"
class="lazy img-responsive" />
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398340678_midnight-b_RGjA.jpg"
class="lazy img-responsive" src=""></img>
不是这样的:
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398340678_midnight-b_RGjA.jpg"
class="lazy img-responsive" />
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398340678_midnight-b_RGjA.jpg"
class="lazy img-responsive" src=""></img>
(换句话说,没有结束标记,而是在最后一个“>”之前添加斜杠,如html约定)
我还看到一个嵌套不正确的标记
你有这个:
<a href="customize/fabric/dItjZRcTuC/">
<div class="image-holder fabric-image-holder">
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398339227_midnight-b_rMUJ.jpg" class="lazy img-responsive" src=""></img>
</div></a>
但它应该是:
<div class="image-holder fabric-image-holder">
<a href="customize/fabric/dItjZRcTuC/">
<img data-src="https://d1r2cy10vhc364.cloudfront.net/1398339227_midnight-b_rMUJ.jpg" class="lazy img-responsive" />
</div>
</a>
这些语法错误有时会造成一些问题,这些问题在某些浏览器上不会显示,但在其他浏览器上会显示。取决于标准合规性。您可以尝试在此处验证语法:提供fiddle或您的网站链接,而不是提供Pngaded链接-