首页 > 下载 > 下载详文:手机网页中的 Viewport 设置

手机网页中的 Viewport 设置

发布时间:2012年07月19日 08时52分20秒   属性:移动/手机应用开发 > Android    访问次数:105447
字体: 初始 添加收藏 分享给好友

手机网页中的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关联参考:

免费
手机网页中的 Viewport 设置 (3)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .