Swiper滑动Html5手机浏览器自适应

来源：互联网发布：java客户端 api接口编辑：程序博客网时间：2024/04/29 03:13

Swiper滑动Html5手机浏览器自适应

分类：代码片段2015-06-10 15:21 281人阅读评论(0) 收藏举报

手机网页能通过window.screen.height, width获取屏幕分辨率，于是可以通过分辨率比率来计算高度。

[html] view plaincopy
window.onload=function(){  
    var swiper = document.getElementById("swiper");  
    var scale = window.screen.height / window.screen.width;  
    swiper.style.height = document.body.clientWidth * scale + "px";  
}  

结合swiper来做个手机全屏适配的滑动，全部代码如下

[html] view plaincopy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,height=device-height,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
    <title>swiper demo</title>  
    <link rel="stylesheet" href="swiper.min.css"/>  
    <style type="text/css">  
    body {  
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;  
        font-size: 14px;  
        color:#000;  
        margin: 0;  
        padding: 0;  
    }  
    .swiper-container {  
        margin: 0 auto;  
    }  
    .swiper-slide {  
        text-align: center;  
        font-size: 18px;  
        background: #fff;  
    }  
    </style>  
</head>  
<body>  
    <div class="swiper-container" id="swiper">  
        <div class="swiper-wrapper">  
            <div class="swiper-slide" style="background:green;">Slide 1</div>  
            <div class="swiper-slide" style="background:yellow;">Slide 2</div>  
            <div class="swiper-slide" style="background:orange;">Slide 3</div>  
        </div>  
          
        <div class="swiper-pagination"></div>  
          
    </div>  
      
    <script src="swiper.min.js"></script>  
    <script>  
        window.onload=function(){  
            var swiper = document.getElementById("swiper");  
            var scale = window.screen.height / window.screen.width;  
            swiper.style.height = document.body.clientWidth * scale + "px";  
        }  
        var mySwiper = new Swiper('.swiper-container',{  
            direction: 'horizontal',  
            loop: false,  
            pagination: '.swiper-pagination'  
        });      
    </script>  
</body>  
</html>  

转载自：http://blog.csdn.net/dyyaries/article/details/46442187

0 0