手机网页能通过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. VMware vSphere 5.5的12个更新亮点(2)

    ACPI支持 以前版本的VMware虚拟机的局限性之一,是支持的虚拟设备数量甚少.vSphere 5.5引入了Virtual Hardware 10,这增加了基于SATA的虚拟设备节点,通过AHCI( ...

  2. Unity发送短信

    闲来无事,觉得用uinity来发送短信挺有意思的,所以自己差了点资料,看看能否实现,结果还真的可以!废话不多说,直接码! 1,新建一空工程,我们就简单的使用UGUI搭建一个丑陋的界面吧! 2,界面极其 ...

  3. WebSphere之wasprofile.sh使用

    概要文件(profile) 6.0版本以后才有profile,目的是将用户数据和was本身的文件分开,这样可以定义多个profile,每个profile相当于一个用户,相当于提供了多用户的支持. pr ...

  4. Layer中自定义属性的动画

    转载自:http://blog.jobbole.com/69211/ 默认情况下,CALayer 及其子类的绝大部分标准属性都可以执行动画,无论是添加一个 CAAnimation 到 Layer(显式 ...

  5. [MVC4-基礎] 連動DropDownList - 使用jQuery、JSON

    剛開始學MVC4,以下是一些基礎的學習筆記! 先展示一下結果: 1.選擇申請部門 2.選好後申請部門鎖住防止USER修改並載入該部門所擁有的設備類型 一.資料庫 dept mf_fx 二.View ( ...

  6. UIView /  UIView的布局

    //! 一个视图可以有n个子视图,但是一个视图只能有一个父视图 struct CGRect {   CGPoint origin;   CGSize size; }; CGRectMake(CGFlo ...

  7. 《转载》深入理解 cocos2d-x 坐标系

    原文地址:http://www.cnblogs.com/lyout/p/3292702.html. 首先我们添加两个测试精灵(宽:27,高:40)到场景里面: CCSprite *sprite1 = ...

  8. HDU 4268 Alice and Bob set用法

    题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=4268 贪心思想,用set实现平衡树,但是set有唯一性,所以要用 multiset AC代码: #i ...

  9. The Love-Letter Mystery

    def numOperations(testStr): num = 0 n = len(testStr) for i in range(n / 2): num += abs(ord(testStr[i ...

  10. Manasa and Stones

    from __future__ import print_function def main(): t = int(raw_input()) for _ in range(t): n = int(ra ...