手机网页能通过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. 如何单独编译Android源代码中的模块

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6566662 第一次下载好Android源代码工 ...

  2. compareTo简介

    compareTo()方法是用来比较字符串大小,该方法用来判断一个字符串是大于,等于还是小于另一个字符串.判断字符串大小的依据是根据他们在字典中的顺序决定的 语法 Str1.compareTo(Str ...

  3. DB2数据库全系列版本安装介质下载地址

    网盘:http://pan.baidu.com/s/1qWE4D7A? ... qq-pf-to=pcqq.group官方:http://www-01.ibm.com/support/docview. ...

  4. C# 操作 AppSettings节点

    1.实例 //1.简单获取内容 string value = ConfigurationManager.AppSettings["one"] as string; Console. ...

  5. datatable列操作

    DataTable myDt =dt;  //删除列  myDt.Columns.Remove("minArea");  myDt.Columns.Remove("max ...

  6. ArcEngine - 地图和布局同步

    1,定义同步的类: using System; using System.Collections.Generic; using System.Linq; using System.Text; name ...

  7. UIButton和UIImageView的区别

    1.显示图片 1> UIImageView只能一种图片(图片默认会填充整个UIImageView)  image\setImage: 2> UIButton能显示2种图片 * 背景 (背景 ...

  8. C# 几十万级数据导出Excel，及Excel各种操作

    先上导出代码 /// <summary> /// 导出速度最快 /// </summary> /// <param name="list">&l ...

  9. SimpleDateFormat的部分方法

    1,语法格式:new SimpleDateFormat("yyyy-MM-dd HH:mm") parse:String-->Date format:Date-->St ...

  10. AngularJS 通过 Spring Restful 上传文件

    总结一下,在写下这些文字之前心里很不爽,一个小问题倒腾了这么久...  JS 端: // 指令 app.directive('fileModel', ['$parse', function($pars ...