Web移动端视口与屏幕适配

网站前端开发三要素 网站前端开发书 网站web前端开发

视口

视口(viewport)是用来约束你网站中最顶级块元素<html>的,即它决定了<html>的大小。
移动设备
我们知道移动设备屏幕普遍都是比较小的,但是大部分的网站又都是为PC设备来设计的,要想让移动设备也可以正常显示网页,移动设备不得不做一些处理,只要viewport足够大(块级元素html就会比较大),就能保证原本为PC设备设计的网页也能在移动设备上正常显示,移动设备厂商也的确是这样来处理的。
在移动设备上viewport不再受限于浏览器的窗口,而是允许开发人员自由设置viewport的大小,通常浏览器会设置一个默认大小的viewport,同时为了能够正常显示那些专为PC设计的网页,一般这个值的大小会大于屏幕的尺寸。
如下图为常见默认viewport大小(仅供参考)

从图中统计数我们得知不同的移动厂商分别设置了一个默认的viewport的值,这个值保证大部分网页可以正常在移动设备下浏览。
下面我们通过一个小示例来验证上述结论,执行环境为iPhone5s
在示例中我们设定.box{width: 490px;}了,发现两个盒子正好一行显示
设定了.box{width: 491px;},则换行显示了。
验证了iPhone5s下viewport的默认宽为980px,这样便可以保证原本为PC设计的网页,在移动端上也不会发生布局的错乱。
我们再做另一个测试。
在iPhone5s和部分Android中我们发现页面内容(文字、图片)被缩放了(变的非常小),而在部分安卓设备中则出现了滚动条。
产生缩放和滚动条的原因是什么呢?
要解释上面的原因,需要进一步对移动设备的viewport进行分析,移动设备上有2个viewport,分别是layout viewport和ideal viewport。
1、layout viewport(布局视口)指的是我们可以进行网页布局区域的大小,同样是以css像素做为计量单位,可以通过下面方式获取
// 获取layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;
通过前面介绍我们知道,如果要保证为PC设计的网页在移动设备上布局不发生错乱,移动设备会默认设置一个较大的viewport(如IOS为980px),这个viewport实际指的是layout viewport,我们也可改变这个默认值,后面将会介绍。
2、ideal viewport(理想视口)设备屏幕区域,以dp(或pt、px)做为计量单位,不同的设备具有不同大小的理想视口,其大小是不可能被改变的,通过下面方式可以获取。
// 获取ideal viewport有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;
并不总是正确的,然而在实际开发我们一般无需获取这个值具体大小。
在理解了上述三个viewport后我们来解释为什么网页会被缩放或出现水平滚动条,其原因在于移动设备浏览器会默认设置一个layout viewport,并且这个值会大于ideal viewport,那么我们也知道ideal viewport就是屏幕区域,layout viewport是我们布局网页的区域,那么最终layout viewport最终是要显示在ideal viewport里的,而layout viewport大于ideal viewport时,于是就出现滚动条了,那么为什么有的移动设备网页内容被缩放了呢?移动设备厂商认为将网页完整显示给用户才最合理,而不该出现滚动条,所以就将layout viewport进行了缩放,使其恰好完整显示在ideal viewport(屏幕)里,其缩放比例为ideal viewport / layout viewport。

移动浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的,除此之外还有Windows Phone。
移动端主要可以分成三大类,系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器:指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器:通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等,这些APP里往往会内置一个浏览器,我们称这个浏览器为应用内置浏览器(也叫WebView),这个内置的浏览器一般功能比较简单,并且客户端开发人员可以更改这个浏览器的某些设置,在我们理实的开发里这个浏览器很重要。
第三方浏览器:指安装在手机的浏览器如FireFox、Chrome、360等等。
在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基础Webkit内核的。
思考:移动端页面要达到什么效果才最合理?

屏幕适配

经过分析我们得到,移动页面最理想的状态是,避免滚动条且不被默认缩放处理,我们可以通过设置<meta name=”viewport” content=””>来进行控制,并改变浏览器默认的layout viewport的宽度。
Viewport详解
viewport 是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案,后来被其它移动设备厂商采纳,其使用参数如下:
// 通过设置属性content=””实现,中间以逗号分隔
// 例如 <meta name=”viewport” content=”width=device-width”>
width 设置layout viewport 宽度,其取值可为数值或者 device-width。
height 设置layout viewport 高度,其取值可为数值或者device-height
initial-scale设置页面的初始缩放值,为一个数字,可以带小数。
maximum-scale允许用户的最大缩放值,为一个数字,可以带小数。
minimum-scale允许用户的最小缩放值,为一个数字,可以带小数。
user-scalable是否允许用户进行缩放,值为”no”或”yes”。
注:device-width 和 device-height实为ideal viewport的宽高。
控制缩放
1、设置<meta name=”viewport” content=”initial-scale=1″>,这时我们发现网页没有被浏览器设置缩放。
2、设置<meta name=”viewport” content=”width=device-width”>,这时我们发现网页也没有被浏览器设设置缩放。
当我们设置width=device-width,也达到了initial-scale=1的效果,得知其实 initial-scale = ideal viewport / layout viewport。
两种方式都可以控制缩放,开发中一般同时设置width=device-width和initial-scale=1.0(为了解决一些兼容问题)参见移动前端开发之viewport深入理解,即<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
避免滚动
我们知道,滚动条是 layout viewport 相对于 ideal viewport 的,所以只要设置 layout viewport 小于或等于 ideal viewport,即<meta name=”viewport” content=”width=device-width”>。
经测试发现我们并没有完全的解决滚动条的问题,原因在于我们示例里的.box {width: 1024px;}设置了一个绝对的宽度造成的,要解决这个问题我们可以设置一个百分比(100%)的宽度。
百分比适配
1、设置<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、设置页面宽度为百分比
见代码示例京东商城
关于百分比
我们需要重新认识css里百分比的使用。
// 测试下列属性设置为百分比
width 参照父元素的宽度
height 参照父元素的高度
padding 参照父元素的宽度
border 不支持百分比设置
margin 参照父元素的宽度
rem适配
1、设置<meta name=”viewport” content=”width=device-width, initial-scale=1″>

  1. 设置页面元素宽度单位为 rem 或 em
    注:此方案比较灵活,我们的案例将采用这种方案
    关于em和rem
    em 相对长度单位,其参照当前元素字号大小,如果当前元素未设置字号则会继承其祖先元素字号大小 例如 .box {font-size: 16px;} 则 1em = 16px .box {font-size: 32px;} 则 1em = 32px,0.5em = 16px
    rem 相对长度单位,其参照根元素(html)字号大小 例如 html {font-size: 16px;} 则 1rem = 16px html {font-size: 32px;} 则 1rem = 32px,0.5rem = 16px; 注:所有浏览器默认字号都是16px(某些安卓手机可以调置系统字号后,浏览器默认字号会受影响)

网站前端开发多久能学会 前端开发制作网站注意事项 网站开发前端与后端区别

» 本文来自:前端开发者 » 《Web移动端视口与屏幕适配》
» 本文链接地址:https://www.rokub.com/5789.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!