移动端开发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用法详解就介绍到这了。

回复

我来回复
  • 暂无回复内容