移动端开发viewport用法详解
移动端开发viewport用法详解属于前端实例代码,有关更多实例代码大家可以查看。
在进行移动端页面开发的时候,通常会在页面的头部发下如下代码:
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
viewport在移动端是一个非常重要的概念,下面就介绍一下它的相关内容,希望能够给需要的朋友带来一定的帮助。
当用手机去浏览一个为桌面浏览器设计的网站的时候,你会发现手机浏览器也能够将页面完整的展现,截图如下:
上面的截图是默认状态下,访问桌面版本的截图,虽然能够比较完美的展现整个页面,但是问题也出现了,那就是页面内容太小了,需要不断的放大缩小来查看或者查找页面的内容,非常的不方便。
显示页面的这个视口我们就称作为viewport。大家知道移动设备的屏幕要比pc端的小很多,比如iphone4,它的屏幕是320x480(设备独立像素)的,它之所以能够完整的显示本站的桌面页面,是因为将一个较大的虚拟窗口映射到手机屏幕上,默认情况下,宽度通常是980px(不同的设备,此值也不同),这个时候viewport的宽度值是980px。当然我们也可以人为的设置viewport的大小,代码如下:
<meta name="viewport" content="width=600,inital-scale=1.0,user-scalable=yes;" />
上面的代码将viewport的值设置为500px,但是在实际应用中,通常将视口的宽度设置为设备宽度。
<meta name="viewport" content="width=device-width" />
参数介绍:
(1).width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度。
(2).height:和 width 相对应,指定高度。
(3).initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
(4).maximum-scale:允许用户缩放到的最大比例。
(5).minimum-scale:允许用户缩放到的最小比例。
(5).user-scalable:用户是否可以手动缩放。
移动端开发viewport用法详解,这样的场景在实际项目中还是用的比较多的,关于移动端开发viewport用法详解就介绍到这了。