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

全栈程序员-用户IM • 2022年1月30日下午3:00 • 未分类

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

手机网页能通过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手机浏览器自适应