<script>
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
</script>#sologrande {
width: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
max-width:500px;
}
.wrapper{
max-width: 1000px;
width: 80%;
background-color: #FFF;
margin:0 auto;
}
<div class="wrapper">
<div id="sologrande">
<img src="small/image1.png" name="zoom_01" id="zoom_01"
data-zoom-image="large/image1.jpg" >
</div>
</div>
并没有调整。
谢谢你
答案 0 :(得分：0)
我成功地复制了这个错误并将其记录下来
此链接下的错误版本：
http://mikemoney.nazwa.pl/elevate/demo-before.html
在智能手机上录制的错误，请在此链接下观看：
https://www.dropbox.com/s/7lbqgy1bna6ee64/bugged.mov?dl=0
修复示例
http://mikemoney.nazwa.pl/elevate/demo.html
<强>解决方案：
要解决此问题，每次CSS @media查询更改图像的宽度时，您需要刷新提升。
为了解决这个问题，我使用jQuery Mobile库来处理方向更改事件，使用jQuery来处理resize。我做了一个简单的例子。
首先，我为240px-320px和321px-640px之间的屏幕尺寸添加两个CSS断点。这将使图像宽度适应屏幕尺寸。为了定位具有不同分辨率和屏幕尺寸的其他智能手机，建议添加更多@media查询。但这只是一个简短的例子。
/*Target devices 240px - 320px width*/
@media only screen and (min-width: 240px) and (max-width: 320px) {
#zoom_01 {
width:200px;
}
}
/*Target devices 321px - 640px*/
@media only screen and (min-width: 321px) and (max-width: 640px) {
#zoom_01 {
width:300px ;
}
}
我们需要确定，在两种情况下会提升缩放比例：
1）关于方向改变
$( window ).on( "orientationchange", function() {
});
2）关于窗口宽度变化
$( window ).on( "resize", function() {
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src="http://mikemoney.nazwa.pl/elevate/jquery-1.8.3.min.js"></script>
<script src="http://mikemoney.nazwa.pl/elevate/jquery.elevatezoom.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style type="text/css">
#sologrande {
width: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: left;
max-width:500px;
}
h1 {
font-size: 14px;
color:royalblue;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
margin:0;
padding:0;
font-weight: bold;
color:#222222;
}
p.mobile, p.landscape {
display: none;
}
p#status {
color:goldenrod;
font-weight: bold;
}
.wrapper{
max-width: 1000px;
margin:0 auto;
background:#dcdcdc;
}
#zoom_01 {
width:411px;
}
/*Target devices 240px - 320px width*/
@media only screen and (min-width: 240px) and (max-width: 320px) {
p.mobile
{
display: block;
color:red;
}
#zoom_01 {
width:200px;
}
}
/*Target devices 321px - 640px*/
@media only screen and (min-width: 321px) and (max-width: 640px) {
p.landscape
{
display: block;
color:red;
}
#zoom_01 {
width:300px ;
}
}
</style>
</head>
<body>
<h1>[FIXED VERSION]</h1>
<p class="mobile">Mode: <strong>Portrait</strong> (max-width: 320px)</p>
<p class="landscape">Mode: <strong>Landscape</strong> (min-width: 321, max-width: 720px)</p>
<p id="imgWidth">Image width</p>
<p id="status">Status: Just loaded...</p>
<div class="wrapper">
<div id="sologrande">
<img src="http://mikemoney.nazwa.pl/elevate/images/small/image1.png" name="zoom_01" id="zoom_01" data-zoom-image="http://mikemoney.nazwa.pl/elevate/images/large/image1.jpg">
</div>
</div>
<div style="clear:both"></div>
<script>
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//Triggered when orientation is changed.
$( window ).on( "orientationchange", function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Orientation changed!.");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
//Triggered when window width is changed.
$( window ).on( "resize", function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Window resized!.");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
//Triggered on document ready
$( document ).ready(function() {
var windowWidth = $( window ).width(), // get window width
imgWidth = $( "#zoom_01").width(); // get image width
//Init elevateZoom
$("#zoom_01").elevateZoom({gallery:'cartera',zoomType:'inner', cursor: 'pointer',responsive: true, containInnerZoom: true, galleryActiveClass: 'active', imageCrossfade: true,zoomSizeMode:'image', loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//display status
$( "#status" ).html("Status: Just loaded!");
//display image and window width
$( "#imgWidth" ).html("Image width: " + imgWidth + "px" + "<br />" + "Window width: " + windowWidth + "px");
});
</script>
</body>
</html>