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,而不会出现任何变形或丢失情况。

时间: 2024-12-25 16:25:27

HTML5工具做屏幕自适应的两种方法的相关文章

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

iOS里面的屏幕适配(两种方法)

第一种方法:进行等比缩放 适用于只有单个或者很少的页面需要适配的时候 第二种方法:用别人已经封装的类,进行屏幕的适配 适用于多个页面都需要进行屏幕适配 这是在ViewController.m里面的代码

实现文本框高度自适应的两种方法

需求:做一个文本框需要让文本框有一个默认的最小高度,当书写的文字到文本框的最底端的时候可以让文本框自动撑开. 第一种方法通过js来实现的: html部分:<textarea name=""  class="disvertop describe-texa" autoHeight="true"></textarea> cssl部分: .describe-texa{padding:10px; outline: none; res

ios 设置屏幕方向的两种方法

第一种:通过人为的办法改变view.transform的属性. 具体办法: view.transform一般是View的旋转,拉伸移动等属性,类似view.layer.transform,区别在于View.transform是二维的,也就是使用仿射的办法通常就是带有前缀CGAffineTransform的类(可以到API文档里面搜索这个前缀的所有类),而view.layer.transform可以在3D模式下面的变化,通常使用的都是前缀为CATransform3D的类. 这里要记住一点,当你改变

unity,实现屏幕后处理的两种方法

方法一: Main Camera的Target Texture保持为None.挂一个Blit脚本,在其中的OnRenderImage中调用Graphics.Blit(sourceTexture,destTexture,myMaterial). 需要注意的是myMaterial中的shader一定要用ZWrite Off.ZTest Always的shader. 方法二: 为Main Camera的Target Texture指定一个RT,直接渲染到RT,同时将RT赋给一个quad并用一个正交相机

CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用CSS实现真的很简单很简单,下面我们来看一下第一种方法具体的代码: HTML代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏

利用颜色和形态学两种方法进行车牌区域提取的OpenCV代码

要想提取车牌号,首先你要定位车牌区域嘛,本文分别两种方法用,即颜色和形态学的方法,对车牌区域进行判定.说得是两种方法,其实两种方法并无多大的区别,只是有一步的判断标准不一样而已,你看了下面整理出的的思路就知道两者的区别真的很小了. 方法一:利用颜色提取车牌区域的思路: ①求得原图像的sobel边缘sobelMat ②在HSV空间内利用车牌颜色阈值对图像进行二值化处理,得到图像bw_blue→ ③由下面的判别标准得到图像bw_blue_edge for (int k = 1; k != heigh

C#实现Dll(OCX)控件自动注册的两种方法 网上找的 然后 自己试了试 还是可以用的

尽管MS为我们提供了丰富的.net framework库,我们的程序C#开发带来了极大的便利,但是有时候,一些特定功能的控件库还是需要由第三方提供或是自己编写.当需要用到Dll引用的时候,我们通常会通过“添加引用”的方式将它们纳入到项目中,然后就可以像使用自己的类一样方便的使用它们了.但是,有些Dll库(OCX)文件是需要注册到Windows注册表后才能正常添加和使用的.本文介绍两种为Dll库(OCX)自动注册的方法,为大家提供参考. 首先,大家都知道在Windows的“运行”中,输入“Regs