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

Posted 2020-06-18 yxwkaifa

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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手机浏览器自适应的主要内容，如果未能解决你的问题，请参考以下文章

html5 手机端怎么优化页面滑动

uniapp真机高度显示不全

移动设备手机浏览器Javascript滑动事件代码

html5手机端的点击弹出侧边滑动菜单代码

html在pc端变形

微信小程序：swiper高度动态适配