手机网页能通过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. [RxJS] Refactoring Composable Streams in RxJS, switchMap()

    Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstr ...

  2. 在WIN7系统下用Quartus ii 11.1 NIOS II 11.1 有时候会出现Nios II 的Run as hardware 中报错：Downloading ELF Process failed

    nios工程在编译通过后RUN的过程中出现Error Running Nios II Project: ‘Downloading ELF Process failed’问题原因: 1.nios2 cp ...

  3. CSS transform(变形)和transform-origin(变形原点)

    transform(变形)和transform-origin(变形原点)的说明: 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支持,属性名分别为 -webk ...

  4. C#在局域网中连接Liunx上的MySql数据库

    前期准备工作: 我所用的平台是VS2010和Ubuntu 14.04.3  LTS 一.由于MySql并没有集成在VS2010中所以要先安装MySQL Connector Net 6.9.8连接工具, ...

  5. mysql查询分组归类函数-group_concat，通常与group_by一起使用

    select a.`name`,group_concat(b.name SEPARATOR'.') as persons from `group` as a,`person` as b,`person ...

  6. 3 linux、windows环境---路径分隔符不同导致的问题

    问题:通常在eclipse,IntelliJ IDEA等进行代码编写时,程序中用到路径通常采用/job/test.properties或D:/job/test.properties等是形式作为文件路径 ...

  7. hdu Repositoryti

    算法:字典树 题意:给你一些字符串,然后会有一些询问,输出询问在给定的字符串中出现了多少次(字串也是): 例如 add,子串有:a ,d,d,ad ,dd,add:你会发现子串d出现了两次,那么怎么办 ...

  8. vector -1

    vector的特色有支持随机存取,在集合尾端增删元素很快,但是在集合中间增删元素比较费时. vector以模板(泛型)方式实现,可以保存任意类型的变数,包括使用者自定义的资料型态,例如:它可以是放置整 ...

  9. （原+转）ubuntu终端输出彩色文字

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6066697.html 参考网址: http://www.tuicool.com/articles/jI ...

  10. Python爬虫学习：一、相关概念与基础知识

    爬虫: 网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.传统爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽 ...