手机浏览器Viewport 参数(web前端设计)
发布时间：2013-04-08 16:59:03 作者：佚名 
我要评论
我要评论手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放 yes or no
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放 yes or no
相关文章
像素密度与CSS3的viewport在移动端Web响应式布局中的运用
viewport是CSS3中调整缩放的利器,特别适用于移动端Web界面的操作与布局,接下来我们就来详解像素密度与CSS3的viewport在移动端web响应式布局中的运用.2016-05-27HTML5移动端开发中的Viewport标签及相关CSS用法解析
这篇文章主要介绍了HTML5移动端开发中的Viewport标签及相关CSS用法解析,Viewport常被叫做视口或视区,在移动端布局和屏幕适配中有着重要的作用,需要的朋友可以参考下2016-04-15- 这篇文章主要介绍了CSS3中视窗单位Viewport的常见用法,包括视窗的高度宽度及垂直居中等基本设定方法,需要的朋友可以参考下2016-02-04
- 这篇文章主要介绍了网页宽度自动适应手机屏幕宽度的实现代码,需要的朋友可以参考下2015-08-11
- meta标签中的viewport可以控制设备屏幕的高度、宽度、初始的缩放比例等等，喜欢的朋友可以了解下2014-08-22
- meta标签中的viewport可以设置屏幕的css样式，包括宽、高、初始缩放比例等等2014-07-28
- 这篇文章主要介绍了html网页中meta viewport属性说明,需要的朋友可以参考下2014-05-07
- 这篇文章主要介绍了html的meta viewport属性说明,需要的朋友可以参考下2014-04-16
- viewport并非只是ios上的独有属性，在android、winphone上同样也有viewport，下面为大家详细介绍下HTML meta viewport2014-03-12
- 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不2013-12-02
最新评论