HTML5工具做屏幕自适应的两种方法
近一两年,HTML5在中国很火,也出了不少HTML5工具和模板。别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么?
简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设备进行动态的适配。例如,用iPhone4、iPhone5、iPhone6、PC、iPad访问同一个H5网页,都能打开一个适合该设备的一个HTML5页面,不留白边,不变形。
由于设备分辨率和长宽比都不同,如果设计一次就能适应所有的屏幕(包括移动端和PC端),几乎不可能。原因有三:
1. 如果等比例缩放,内部位置关系会发生变化,就会严重影响用户体验;同时,设备屏幕之间不存在等比例的关系,所以同样会有部分屏幕内容无法显示或留白边;
2. 如果把小屏幕适配好,放在更高的大屏幕里面,那两边就会有白边;或者把图扯大,这样就会变形;
3. 如果把大屏幕适配好,放在小屏幕中,就有些部分会丢失。
因此,除非借助未来的AI(人工智能)的发展,否则很难自动解决这个问题。而以前的网站,也只能分开几种版面进行设计,例如根据宽度大小采用设计板式。
那现在的HTML5工具是如何实现感应式设计的?经研究发现,共有两种方式,第一种是伪感应式设计(以易企秀为例),第二种是多版面感应式设计(以iH5.cn为例)。
上图是易企秀的测试结果,依次是iPhone4、iPhone5、iPhone6对同一网页的显示情况。使用iPhone4时,变形最严重;iPhone5效果最好;iPhone6是等比例缩放后,两侧边缘,有些像素显示不了。所以可以基本判断这个HTML5工具按照iPhone5为标准版型。因此,这种感应式设计被称为伪“感应式”,设计时不会留白边,但要求尽量把内容都往中间放,这就需要设计一张名为“背景”的底图,用于拉伸时用。
[存在问题]
1. 内容都要居中放,不能放上下边缘,例如把按钮放到最下面,iPhone打开后就看不到按钮了;
2. 不可能适应PC、Pad等设备。
这种伪感应式设计比较简单,但也只能在应急时使用,如果想要尽可能实现完美适应,就需要采用多版面感应式设计。
能让网页自动适应多个屏幕的HTML5工具,需要为不同尺寸和分辨率的设备设置不同的屏幕。iH5.cn采用的就是这种多版面感应式设计,提供在编辑H5页面时添加多个屏幕,用户能自主为不同屏幕设计适于显示的页面。它本身原理是添加Device控件,如果是手机端的轻应用一般采用iPhone 4、5、6的分辨率即可。
这样的话,才可能用一个URL地址,完美适应多个屏幕,包括PC端和Pad,而不会出现任何变形或丢失情况。
HTML5工具做屏幕自适应的两种方法的更多相关文章
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- 设置一个DIV块固定在屏幕中央(两种方法)
设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...
- ios 设置屏幕方向的两种方法
第一种:通过人为的办法改变view.transform的属性. 具体办法: view.transform一般是View的旋转,拉伸移动等属性,类似view.layer.transform,区别在于Vi ...
- unity,实现屏幕后处理的两种方法
方法一: Main Camera的Target Texture保持为None.挂一个Blit脚本,在其中的OnRenderImage中调用Graphics.Blit(sourceTexture,des ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
- 在vc6.0下编的对话框界面如果没做过其他处理,往往显的很生硬,怎么样才能使他有Windows XP的风格呢,其实也很简单,我们来看看下面两种方法。
在vc6.0下编的对话框界面如果没做过其他处理,往往显的很生硬,怎么样才能使他有Windows XP的风格呢,其实也很简单,我们来看看下面两种方法. 方法一: 1.首先确认你在Windows ...
- 在Delphi中使用C++对象(两种方法,但都要改造C++提供的DLL)
Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...
- div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
随机推荐
- 1.WP8.1开发_去除闪动效果,直接进入首页
有时候希望打开软件的时候,不出现闪屏,而直接进入到第一个页面. 把第一个页面作为闪屏,可以制作一些进度条 和动画等... 很简单,有两种方法去除闪屏. 1.删除项目下 Assets 文件夹里面的Sp ...
- eclipse 中 Servlet 模板代码(其实是代码提示模板)
说的是模板代码,应该说的是提示的模板代码,并不是一新建就会出现模板. 第一步:先建一个Servlet文件,写好自己想要的模板 我的模板如下: 全选并复制,等会要粘贴到Servlet的提示模板中. pa ...
- java学习笔记 --- 数组
一.Java的内存分配 A:栈内存: 存储局部变量,只要是在方法中定义的变量都是局部变量.一旦变量的生命周期结束该变量就被释放. B:堆内存: 存储所有new出来的,及实体(对象),每一个实体 ...
- a里面不能嵌套a
1. <a href=""> <a href=""></a></a> 会被浏览器解析为 2. <a hre ...
- webots自学笔记(六)实用控制器函数补充
原创文章,来自"博客园,_阿龙clliu" http://www.cnblogs.com/clliu/,转载请注明原文章出处. 用Webots软件做机器人仿真时,可以编 ...
- line-height属性总结
line-height属性的继承性: 子元素不设置line-height时, 在父元上设置带单位的值和百分比时会先计算父元素的line-height大小然后继承过来,在父元素上设置无单位的数值时,子 ...
- 第1章1zabbix快速入门
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...
- POST和GET的详细解释以及区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- XJOI1689相连的城市
相连的城市 n个城市中,某些城市间有道路互相连接.给出与每个城市相邻的城市有多少个,请输出城市间的邻接矩阵. 输入格式: 第一行输入一个正整数n,表示城市的个数. 第二行输入n个用空格隔开的非负整数, ...
- 【Egret】里使用video标签
egret里使用Html5的Video标签 egret里使用Html5的Video标签的demo: 链接:http://pan.baidu.com/s/1nuNyqRR 密码:x58i //----- ...