手机网页能通过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. Network 20Q--Q2 How does Google sell ad spaces?

    在使用Google搜索的时候会发现,搜索出来的页面除了在左边显示搜索结果以外,还会页面的右边推荐一些广告.那么Google是怎么从这些广告挣钱以及广告商可以通过Google广告获得什么利益呢? Goo ...

  2. springmvc4+hibernate4分页查询功能

    Springmvc+hibernate成为现在很多人用的框架整合,最近自己也在学习摸索,由于我们在开发项目中很多项目都用到列表分页功能,在此参考网上一些资料,以springmvc4+hibnerate ...

  3. 虚拟现实，增强现实，VR，AR

    现在的热点不止VR,还有AR和披着MR.HR.CR外衣的各种高级AR们,所以比较着一起说.以下知乎上一网友观点,放几条结论:1.近期(未来两三年)看,VR能火,AR尚待成熟: 2.VR设备中,插片式是 ...

  4. asp.net实现将网页内容输出到word并下载到本地

    个人觉得要实现这个功能如果没有类库提供的几个关键函数,还是比较繁琐的.所以首先介绍几个将要在代码中使用的关键函数和参数,然后再说函数实现.注意问题等. 关键函数: 1.函数原型:Response.Ap ...

  5. Silverlight 图表下载到Excel文件中

    一.Silverlight xaml.cs文件按钮触发方法 1.//下载图表        private void btnDown_Click(object sender, RoutedEventA ...

  6. PDO事务管理DEMO

    try { $dsn = "mysql:host=127.0.0.1;port=3306;dbname=dab"; $pdo = new PDO($dsn, 'root', '') ...

  7. win32系统信息获取

    #include <Windows.h> #include "resource.h" #include <strsafe.h> PTSTR BigNumTo ...

  8. www

    dddd int vec_rotate(char *vec,int rotdist, int length) { int i,j,k,times; char t; times = gcd(rotdis ...

  9. shell中的双括号表达式

    语法格式 (( expression )) expression可以是任何数学表达式,可以包含的操作符有: +  加 - 减 * 乘(无需转义) / 除 % 取余 ** 指数 == 等于 != 不等 ...

  10. linuxmit下git安装和初级使用

    一.安装 sudo apt-get install git 二.配置 git config --global user.name "Your Name" git config -- ...