javascript - 如何让Flexslider在iOS上显示不同宽高比的图片？-6ren

javascript - 如何让Flexslider在iOS上显示不同宽高比的图片？

转载作者：行者123 更新时间：2023-11-29 10:57:54

我在 iOS 设备上遇到了 Flexslider 问题，这似乎与 this unanswered question 中报告的问题类似.具有不同宽高比的图像的幻灯片在 OSX Safari 和我尝试过的所有其他浏览器(甚至 IE8)上都能正常显示，但在使用 Safari 或 Chrome 的 iOS 5 或 6 上则不能。 iPhone 和 iPad 上都会出现此问题。

我首先在为客户构建的大型响应式组合站点中注意到这一点，并认为这可能与不寻常的配置有关，包括使用 Ajax 拉动 slider 。事实证明，我能够将其简化为一个简单的示例。下面是示例在 iOS 和 OSX Safari 中的屏幕截图。

enter image description here

示例非常简单，使用jQuery 1.10.1和jQuery.flexslider 2.1。你可以找到a working example on my website .这是代码:

<!DOCTYPE html>
<html>
    <head>
     <meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
     <script src="jquery.js" type="text/javascript"></script>
     <script src="jquery.flexslider.js" type="text/javascript"></script>
     <script type="text/javascript">
        jQuery(window).load(function() {
          jQuery('.flexslider').flexslider({
             controlNav:true, 
             animationLoop: true,
             slideshowSpeed:2000
          });
        });
    </script>
    <link rel="stylesheet" href="flexslider.css" />
    <style type="text/css">
        #example{
           width:100%;
           height:auto;
           max-width:400px;
           background-color:#f0f0f0;
        }
    </style>
</head>
<body>
    <h1>Flexslider iOS bug example</h1>
        <section id="example">
            <div class="flexslider">
                <ul class="slides">
                    <li><img src="tallslide.jpg"></li>
                    <li><img src="wideslide.jpg"></li>
                </ul>
            </div>    
            <p>Text after slider</p>
        </section>
   </body>
</html>