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

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

大家好,又见面了,我是全栈君。

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

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来做个手机全屏适配的滑动,所有代码例如以下

<!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>

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115793.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号