在用HTML5开发手机应用或手机网页时，<head>部分总会有如下一段代码，这段代码到底什么意思呢。在网上，大家会得到很多答案。我从网上搜集了部分介绍，整理一下，以留备用。
<meta name="viewport" content="width=device-width">
或者
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
“viewport”，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。如下图所示，一个普通的文章页面在移动设备的效果：
页面以980像素加载，没有变形，但是按比例缩放后，很多东西用肉眼基本看不清了。
那么我们能不能人为改变webkit的视区呢？当然能，在<head>与</head>之间加上如下视区代码：
<meta name="viewport" content="width=500"/>
我们来看看页面加上强制视区大小命令后效果怎么样？ 如下图所示：
那么有没有更好的方法呢？比如说我们自动检测移动设备屏幕大小，然后让内容自适应。看下面的代码，device-width将自动检测移动设备的屏幕宽度：
<meta name="viewport" content="width=device-width" />
转自：http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748644.html
分享到：
相关推荐
### WEB自适应、HTML5与HTML动画 #### 一、WEB自适应设计的重要性 随着互联网技术的迅猛发展，用户访问网站的方式已经不再局限于传统的台式电脑。越来越多的用户选择使用智能手机、平板电脑等移动设备来浏览网页。...
H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文...
首先，H5，全称为HTML5，是超文本标记语言的最新版本，它为网页带来了更丰富的交互性和多媒体功能。H5在移动设备上的表现力尤其出色，能够提供流畅的用户体验，无需安装即可通过浏览器访问，大大降低了用户的使用...
【标题】"H55_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 指的是一个压缩文件，包含了用于构建手机和电脑跨平台的HTML5网站的源代码。这个源码是针对移动端前端设计的，采用了HTML5技术，...
首先，HTML5引入了`<meta>`标签的`viewport`属性，这对于移动设备上的自适应设计至关重要。`, initial-scale=1">`这行代码告诉浏览器应该根据设备宽度来设置视口大小，并保持初始缩放比例为1，确保页面在不同屏幕...
在网页设计中，有时我们需要在一个HTML页面中嵌入另一个HTML页面，这通常通过iframe标签实现。标题"html嵌入html，高度自适应，标签切换"表明我们正在讨论一种技术，它涉及在HTML文档中嵌入iframe，并且这个iframe...
在移动互联网领域，为了实现网页在不同屏幕尺寸的设备上都能保持良好的视觉效果，开发者通常会采用响应式设计。本文将深入探讨一个基于rem的移动端页面满屏H5自适应方案，该方案适用于设计稿为750 * 1334或640 * ...
描述与标题相同，再次强调了这是一个针对移动端的HTML5网页源码，具有前端开发的完整代码，并且是响应式的。这表明源码不仅提供了基础的网页结构，还包含了适应不同设备尺寸的逻辑，使得网站在手机和平板等不同设备...
首先，“自适应”意味着这是一个可以自动调整布局以适应不同设备屏幕大小的网页设计，特别是对于移动设备而言。这种特性在当今多设备并存的时代非常重要，能够确保用户在手机、平板或桌面电脑上都能获得良好的浏览...
HTML自适应页面设计是现代网页开发中的核心概念，它使得网页能够根据用户设备的不同特性，如屏幕尺寸、分辨率和方向，自动调整布局和内容显示，从而提供良好的用户体验。这一技术的发展，主要是为了应对移动设备的...
HTML5 Canvas 是一种在网页上绘制图形的API，它提供了丰富的功能，使开发者可以创建动态、交互式的视觉体验。在本示例中，"html5 canvas首屏自适应背景动画循环效果代码" 提到了几个关键点，我们将逐一深入探讨。 1...
2. **简化搜索引擎优化**：自适应网页设计有助于搜索引擎（如Google）为网页分配索引属性，无需处理额外的移动版或桌面版网页。 3. **减少维护成本**：相比为不同设备创建单独版本的网站，自适应网页设计只需要维护...
在本主题中，我们关注的是HTML5中的一个特定技术，即实现网页背景自适应缩放，背景图不会随着滚动条滚动，而是根据用户的屏幕分辨率自动调整大小，以达到最佳的视觉效果。这一技术在响应式设计中尤为关键，因为它能...
【全屏自适应HTML5单页模板】是一种现代网页设计技术的应用，主要特点是整个网页以全屏显示，同时能够根据用户设备的屏幕尺寸自动调整布局，以实现良好的跨平台兼容性和用户体验。这样的模板通常适用于展示型网站、...
【jQuery扁平自适应网站HTML5模板】是一个符合现代网页设计趋势的模板，它结合了jQuery库的强大功能和HTML5的最新技术，旨在为用户提供一个响应式、易用且美观的网页设计方案。扁平化设计强调简洁、清晰的界面元素，...
Bootstrap实现的自适应页面简单应用示例 在本文中，我们将详细介绍Bootstrap实现的自适应页面简单应用示例，结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先，让我们了解什么是...
这款资源包包含了一款简约设计的手机APP自适应下载界面的HTML源码，适用于开发者或设计师在构建移动应用网页时快速搭建用户友好的下载页面。HTML源码是网站前端开发的基础，它定义了网页的结构和内容。在这个压缩包...
自适应布局是现代网页设计的关键，通过检测设备的屏幕尺寸和方向，自动调整页面布局，确保在不同设备上都能呈现最佳效果。这种设计方式对于后台管理系统尤其重要，因为管理员可能在各种环境下进行操作，例如在办公室...
【标题】中的“459_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”表明这是一个包含HTML源码的压缩文件，专为手机和电脑设计，适用于移动设备的前端开发，且采用了H5（HTML5）技术，具有自适应...