HTML5开发手机应用--viewport的作用
在用HTML5开发手机应用或手机网页时，<head>部分总会有如下一段代码，这段代码到底什么意思呢。在网上，大家会得到很多答案。我从网上搜集了部分介绍，整理一下，以留备用。
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（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"/>
<meta name="viewport" content="width=device-width" />
相关推荐
### 移动前端，H5，Viewport 详解 #### 一、Viewport的概念 在移动前端开发过程中，了解Viewport是非常关键的一步。Viewport可以被简单地理解为移动设备屏幕上用于显示网页的那一部分区域。具体而言，这指的是在...
在这个案例中，插件的主要作用是将像素单位（px）转换为视口单位（vw/vh），这是在响应式网页设计中常见的一种做法，目的是使网页在不同设备上呈现良好的视觉效果。 **PostCSS简介** PostCSS是一个处理CSS的工具，...
`Ext.Viewport`核心特性与作用 `Ext.Viewport`是一个特殊的布局管理器，其设计初衷是作为应用程序的主要容器，可以占据整个浏览器窗口的可视区域。它支持嵌套布局，允许开发者在一个统一的视图内管理多个子容器或...
此外，`width`属性在iOS上生效，但在Android上可能不起作用，这可能是因为不同平台的浏览器实现差异。 在处理这些问题时，需要考虑不同设备和浏览器的兼容性，可能需要针对特定设备或操作系统进行适配，或者使用...
打开Opera， 看源码在HTML头发现了meta viewport，难道是这个家伙在发挥作用吗？ 加上试试，果然满屏了。顺便去查了一下这个标签的作用，记录一下，方便以后 使用。 meta viewport <meta name=”viewport” ...
这行代码的作用是设置视口宽度等于设备宽度，并且页面加载时的初始缩放比例为1.0，即页面将以100%的大小显示，不允许用户进一步放大页面，也不允许缩小页面。 尽管在一些旧版的移动浏览器中可能不支持某些属性，...
在响应式布局中，CSS3的viewport元标签以及像素密度的概念起着至关重要的作用。它们共同决定了网页如何在不同设备上进行适配和显示。 首先，让我们来理解viewport的概念。viewport是虚拟的概念，指的是浏览器可视...
meta标签的使用非常重要，今天我们将详细介绍meta标签中的几个关键属性，包括viewport、content、width、initial-scale、minimum-scale、maximum-scale，并解释它们在自适应布局中的作用和适用场景。 一、 phys....
这将允许页面使用自定义的视口缩放比例，但请注意，这个方法在 Android 平台上可能不起作用。 2. **Android 平台的解决方法一**： 你可以直接修改 `CordovaWebView.java` 文件。在设置用户代理字符串后，添加以下...
Python在Blender中的作用是至关重要的，因为它是Blender的内置脚本语言，允许用户编写自定义脚本来自动化任务、创建插件或调整软件的行为。在这个项目中，Python可能被用来编写脚本，创建和管理这些视图预设，使得...
这里的`content`属性包含了多个参数，它们的作用如下： 1. `width=device-width`: 这个参数设置视口宽度为设备屏幕的实际宽度。这意味着网页将根据用户的设备屏幕宽度自适应调整。 2. `initial-scale=1.0`: 定义了...
本文将深入探讨自适应屏幕代码，即`<meta name="viewport">`标签的使用方法及其背后的原理。 #### 一、`<meta name="viewport">`标签解析 `<meta name="viewport">`是HTML文档中的一个元信息标签，它用于控制页面...
本文档总结了前端开发中的一些重要知识点，包括HTML语义化、Viewport、img和元素的title属性、href和src的区别、doctype的作用、行内元素和块级元素的区别等。 1. HTML语义化 HTML语义化是指使用合理、正确的标签...
在计算机图形学中，"viewport"（视口）和"Cohen-Sutherland"算法是两个重要的概念，它们在创建和管理图形界面时起着至关重要的作用。在这个“viewport-Cohen-programming-algorithm.zip”压缩包中，包含的是一个使用...
10. **图形算法**：包括Dijkstra算法、Floyd-Warshall算法在最短路径问题中的应用，以及Bresenham算法、DDA算法在直线和曲线绘制中的作用。 11. **动画原理**：关键帧动画、物理模拟、骨骼绑定等是创建动态图形的...
同样，委托在这里也可以发挥关键作用，比如自定义每个选项的显示样式或者行为。 在提供的QTDemo项目中，你可以找到一个完整的实现示例，包含了如何构建Model、View、Delegate，并将它们正确地组合在一起。这个示例...