无纸化教育传媒 伴随着您成长 伴随着您进步
手机网页中的Viewport设置
在智能手机浏览器中的网页和PC浏览器中有着不同的呈现区别，虽然在手机中浏览网页和PC中浏览网页Html元素都相同，但是呈现尺寸比例却有着不同的属性，Viewport是手机显示控制非常重要的地方，这个标签属性在PC电脑上没有这个要求，有没有这个属性都不影响PC浏览器察看Web页面。由于移动设备的屏幕大小尺寸比例都不相同，在手机中常用到的缩放页面来浏览页面内容，虽然在PC浏览器上也页面缩放功能，但普通情况下在PC上几乎不需要用这个缩放功能。由于手机屏幕尺寸小，缩放功能就成为了必须工具。下面详细介绍在手机中通过 Viewport 来控制页面尺寸。
在Html页面<head>中嵌入<meta name = "viewport" content = "width = device-width" />，这里将是页面内容显示呈现为手机屏幕的宽，将随用户手机客户端的屏幕尺寸宽度来显示。现面可以对比没有加入meta viewport标签属性和加入meta viewport区别。下面 图例是简单Html中放入图片标签显示，可以看到左边是默认的Html没有加入meta viewport，右边为加入了手机属性Viewport显示，则是满屏显示图片。
;
initial-scale 手机页面缩放控制用initial-scale属性来控制，即加入<meta name = "viewport" content = "initial-scale = 1.0" />，在默认情况下如果不加入meta initial-scale定义，initial-scale为1:1的100%显示。initial-scale值为1即为100%显示，每加0.1则放大10%。下面图利可以看到详细显示情况。
initial-scale 的最大缩放值和最小缩放值，minimum-scale为最小值，maximum-scale为最大值；关闭缩放或开启缩放user-scalable，user-scalable有两个值yes为开启，no为关闭。实际运用的写法<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = yes, minimum-scale=1.0, maximum-scale=2.0" />。
智能手机平板电脑都能识别meta viewport属性，PC上由于屏幕尺寸要大，所以这个viewport不是那么重要，但是在手机屏幕上这个标签就起到至关重要的作用。
各智能手机Viewport关联参考：
