适应屏幕的方案:

1、css3 Media queries (针对多版本设计稿)

2、设计稿不复杂的时候 通过宽度自适应用百分比

3、通过更新meta:viewport标签,通过设计稿尺寸和设备尺寸的比例去设置

优点:

1、简单易懂,不需要JavaScript的支持,跨度大

2、适应能力强,代码量较少

3、适应能力强,针对不同的屏幕基本都可以适应

缺点:

1、代码量冗余,需要针对不同的屏幕尺寸去处理,

2、对设计稿有限制

3、页面比较大的时候,加载显示的时候会重绘(待验证)

1、可视区域宽度小于600的时候回应用

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

3、根据设计稿和devicewidth 获得bfb

var design = 420,device = document.documentElement.clientWidth;
var bfb = (device/design).toFixed(1); var atts = "width="+design+", user-scalable=no, initial-scale="+bfb+", maximum-scale="+bfb+", minimum-scale="+bfb
id.setAttribute("content",atts);

html5适应屏幕的方案的更多相关文章

  1. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  2. HTML5实现屏幕手势解锁

    HTML5实现屏幕手势解锁(转载) https://github.com/lvming6816077/H5lockHow to use? <script type="text/java ...

  3. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  4. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  5. cocos2dx屏幕适配方案

    我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...

  6. [原创]一种Unity2D多分辨率屏幕适配方案

    此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...

  7. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  8. Android 屏幕适配方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...

  9. 实用Android 屏幕适配方案分享

    转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...

随机推荐

  1. 区块链 block chain 去信任

    去中心化:不以参与交易的任何一方为中心 去信任:假定参与交易的任何一方都是不可信任的 区块链受到关注的原因 去中心化.去信任化.智能合约等,正好满足未来互联网持续发展所要求的信息的盖度自动化和高度程序 ...

  2. Career Planning:Developers Best Practices Tutorial

    This small tutorial is based on my past 16+ years of experience in software development industry. I ...

  3. git 解决push报错:[rejected] master -> master (fetch first) error: failed to push some refs to

    今天对代码进行了修改优化,然后往往远程push,但push后报错了 git操作 git add . git commit -m"fix" git push origin maste ...

  4. DRF(1) - REST、DRF(View源码解读、APIView源码解读)

    一.REST 1.什么是编程? 数据结构和算法的结合. 2.什么是REST? 首先回顾我们曾经做过的图书管理系统,我们是这样设计url的,如下: /books/ /get_all_books/ 访问所 ...

  5. 通信—HTTP 协议入门(转载)

    HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等). HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于199 ...

  6. 清华教授谈人工智能:BAT还算不上伟大公司

  7. APP 自动化测试封装结构模式

    原文出处http://www.toutiao.com/a6268089772108333314/ 做过UI自动化测试同学,都会深深体会几个痛点:维护量大.适配量大.编写代码巨大等.基于这些问题,大家都 ...

  8. 人性化的Form(django)

    django中的Form一般有两种功能: 输入html 验证用户输入 html: <!DOCTYPE html> <html lang="en"> < ...

  9. ul,li设置inline-block缝隙

    去掉换行符和空白符 margin-left: -0.5em(缝隙大小不确定) ul字号设为0,li设置字号 (有些浏览器设置最小字体) js移除空白子节点

  10. ArcGIS COM Exception 0x80040228

    问题:  string shpDir = Path.GetDirectoryName(shpfile);             string shpfilename = Path.GetFileNa ...