viewport meta 说明及浅见

原创 2013年07月13日 23:15:28

常见使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

宽度为设备宽度,初始缩放比例为 1 倍,禁止用户缩放

<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

属性说明

width:可设定数值,或者指定为device-width(设备宽度)

height:可设定数值,或者指定为device-height(设备高度)

initial-scale:第一次进入页面的初始比例

minimum-scale:允许缩小最小比例

maximum-scale:允许放大最大比例

user-scalable:允许使用者缩放,1 or 0 (yes or no)

最初执行viewport meta加入如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
编译过程会转化成如下的语意,
@viewport {
    width: device-width;
    initial-scale: 1.0
}

基本说明

width=device-width
先提一下几个注意的地方,首先在viewport里面的width通常会看到设定为device-width ,主要是为了让整个页面宽度与手机可视宽度相同,如此就可以简单相容于不同机型萤幕大小,如果这边width没有设定的话,就会依照html css给予的width当作预设值。
因为解析度不同,device-width有时候不一定是view width ,所以在类似iphone 4高解析度机器上,device-width=320 ,可是实际解析度为480,这时候就需要利用javascript针对UA下去做动态调整。user-scalable 从属性名称来看就是允许开启、关闭的设定,使用者能否放大、缩小页面,如果页面不允许手机使用者缩放,就直接设定为0,或者no,反之要启动缩放功能,给予1或者是yes。 接下来将说明几种常用的方式,以及测试验证提供给大家参考。 基本宽度(并不是指html body width),


<meta name="viewport" content="width=300px">
基本高度
<meta name="viewport" content="height=300px">
禁止使用者放大缩小
<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">
基本款式,
<meta name="viewport" content="width=device-width">
初始检视n 放大,(这里使用x 10.0)
<meta name="viewport" content="width=device-width, initial-scale=10.0">
限制最大放大比例
<meta name="viewport" content="width=device-width, maximum-scale=15.0">
限制最小缩小比例(数值必须为正值)
<meta name="viewport" content="width=device-width, minimum-scale=0.1">

进阶应用

上面已经说明了几种常用的基本应用,接着要说明一个概念,假设设定数值

放大议题

initial-scale=10.0
maximum-scale=15.0
可以很简单得知,一开始就是x 10.0,最大可放大到x 15.0,如果变化一下
initial-scale=15.0
maximum-scale=10.0
可以发现,初始的放大比例会变成x 15.0,最大放大比例还是x 15.0,推论出来结果就是
*初始、最大值,以最大值为主*。

缩小议题

接着讨论缩小,一开始设定数值,
initial-scale=5.0
minimum-scale=1.0
结果跟我们预估相同,初始值x 5.0,最小缩小值x 1.0,如果将数值反过来之后会发现,
initial-scale=1.0
minimum-scale=5.0
结果居然是,初始值x 1.0,最小缩小值x 1.0 ,最后推论结果为
初始、最小值,以最小为主。
看到这边相信大家对于数值设定有个认知,接着做个最后小测试,
initial-scale=1.0
minimum-scale=5.0
maximum-scale=0.1
猜猜看,结果为何???
答案,init x 1.0, max x 1.0, min x 1.0,无法放大缩小。

viewport meta 其他参考

另外提供给大家几个viewport的使用方式,
如果在手机端我们希望网页呈现固定,不希望使用者随意缩放,直接设定如下
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果希望在不同device 使用不同缩放大小,就必须使用javascript,侦测UA(User agent),动态设定viewport,片段程式如下,
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

后记

在css media query中, viewport meta是一个初始化很重要的开始,经过这次开发的过程中慢慢分析,调整才了解到里面一些架构状况,另外css @viewport属性还有很多种类,详细列表可以参考W3C viewport property index table
因为目前移动装置萤幕尺寸不同,种类需求也都不同,最理想的状况当然是一种web全部满足,不过依照目前的规格分歧来看,还有一段很长的路要走。

参考资料

  • http://hsinyu00.wordpress.com/2011/04/05/mobile-web-viewport/
  • http://fairyfish.net/m/viewport-meta-tag/
  • http://dev.w3.org/csswg/css-device-adapt
  • http://stackoverflow.com/questions/3588628/can-i-change-the-viewport-meta-tag-in-mobile-safari-on-the-fly

相关文章推荐

user-scalable=no导致部分手机缩放失效

最近与一客户合作,我们的产品以h5的形式集成到别人的App里。客户发给我们测试版的android app,我们给他们链接,然后在他们app里的webview调试 问题来了,我们适配屏幕的方案是采用vi...
  • lindir
  • lindir
  • 2016年11月28日 15:17
  • 3951

浅谈meta viewport设置移动端自适应

1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览...

移动端的meta viewport

什么是viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针...

非响应式设计也可以用Viewport Meta标签

我相信你肯定用了 viewport meta tag 来做响应式设计,但你是否知道 viewport 标签对非响应式设计业是非常有用的?如果你还从没将你的网站转换成为可响应的,就应该好好看下这篇文章,...
  • wowkk
  • wowkk
  • 2013年10月29日 00:08
  • 5873

html5手机网站需要加的那些meta/link标签,html5 meta全解

一、大众机型常用meta标签name的设置 1、name之viewport 说明:屏幕的缩放 content的几个属性:     width viewport的宽度[device-width |...
  • kongjiea
  • kongjiea
  • 2013年12月03日 11:00
  • 44533

关于<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc..

网页源代码中有时候会遇到这样的一段代码: width - viewport的宽度 height - viewport的高度 initial-scale - 初始...
  • Joyhen
  • Joyhen
  • 2015年01月29日 09:59
  • 25298

关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释

对于移动开发来讲,我还不太熟悉。今天在github上荡了一个系统源码,进行分析。发现其中有这样一段话: 对于这段话我有些不解,我通过以下资料才发现它的含义: 随着高端手机的日益...

apache/nginx 开启rewrite模块,实现链接的跳转/nginx上使用TP框架

项目需求是将一个长链接参数很多的链接伪装成一个短链接

Java网络编程(二) - 15分钟搭建我的第一个 Spring MVC 项目

本文中, 我们的目标是开发一个服务器, 我们访问它, 它返回给我们一个字符串"Hello World!" 本文使用的Spring版本是最新的3.2.17, JDK 6, IDE是Eclipse fo...

HTML meta viewport属性详细说明

原帖地址:http://www.jb51.net/web/143116.html viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport...
  • broze
  • broze
  • 2015年03月04日 09:59
  • 399
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:viewport meta 说明及浅见
举报原因:
原因补充:

(最多只允许输入30个字)