手机网页能通过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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHl5YXJpZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" width="200" height="350">

Swiper滑动Html5手机浏览器自适应的更多相关文章

  1. html5手机浏览器启动微信客户端支付实例

    html5手机浏览器启动微信客户端支付实例,外部浏览器html5微信支付技术,如何在手机浏览器微信支付,在微信客户端外的移动端网页使用微信支付 首先在微信支付官网https://pay.weixin. ...

  2. [转] -- html5手机网站自适应需要加的meta标签

    webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...

  3. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  4. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  5. 基于HTML5手机上下滑动翻页特效

    基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-al ...

  6. 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白

    我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...

  7. html5手机常见问题与工具分享

    mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...

  8. html5手机Web单页应用实践--起点移动阅读

    一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...

  9. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

随机推荐

  1. Codeforces Round #260 (Div. 2)A. Laptops

    A. Laptops time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  2. RMAN常用备份恢复命令汇总

    RMAN命令 1.独立命令  RMAN>shutdown immediate  RMAN>startup  RMAN>backup format 'd:\backup\%d_%s.b ...

  3. javascript 模仿 html5 placeholder

    <form action="?action=deliver" method="post" class="deliver-form"&g ...

  4. AndroidAnnotations框架配置

    如今Android Studio的普及,Android开发基本要舍弃Eclipse了,最近使用AndroidAnnotations 注解框架的时候,找了些资料慢慢整出来了,在这给大家简单分享一下: 首 ...

  5. 调用具体webservice方法时时报错误:请求因 HTTP 状态 503 失败: Service Temporarily Unavailable

    添加web引用会在相应项目的app.cofig文件中产生如下代码: <sectionGroup name="applicationSettings" type="S ...

  6. 用C++写出hanoi

    汉诺塔(港台:河內塔)是根据一个传说形成的數學问题有三根杆子A,B,C.A杆上有N个(N>1)穿孔圆盘,盘的尺寸由下到上依次变小.要求按下列规则将所有圆盘移至C杆:-每次只能移动一个圆盘-大的盘 ...

  7. Linux Shell 中的反引号，单引号，双引号

    反引号在 (`) 键盘的Tab键的上方.1键的左方.在Linux中起着命令替换的作用.命令替换是指shell能够将一个命令的标准输出插在一个命令行中任何位置.如下,shell会执行反引号中的date命 ...

  8. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  9. 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器？

    一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...

  10. Sherlock and GCD

    1 import fractions, functools, sys if __name__ == '__main__': T = int(sys.stdin.readline()) for _ in ...