手机站布局中viewport的作用详解

模板网 2014-09-23

什么是Viewport?手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

viewport的基本形式如下：

复制代码 代码如下:

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

其中content中可以包含如下参数:

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。(可使用的值有:yes表示允许，no表示不允许。)

以下为收集整理的一些国内著名的网络公司手机站采用的viewport的形式：

手机百度网

复制代码 代码如下:

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

手机腾讯网

复制代码 代码如下:

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

手机淘宝网

复制代码 代码如下:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

手机新浪网

复制代码 代码如下:

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

手机hao123导航

复制代码 代码如下:

<meta name="viewport" content="width=device-width,user-scalable=0">

手机搜狐网

复制代码 代码如下:

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

 

相关文章

  1. JS滚动bxslider的使用

    1. 详细Demo： http://www.bxslider.com/examples 2、如何使用 在实际中如下引用： script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/jquery.bxslider.js/script bxslider无缝滚动 script type=text/javascript $(f

  2. 手机站布局中viewport的作用详解

    什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动

  3. 仿站小工具 V6.0

    仿站小工具介绍： 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码，提取出JS、Css、Image、Picture、Flash等静态文件网址，再从下载完好的Css代码中提取出Image静态文件网址，通过网址下载静态文件，根据软件设置好的保存规则，自动修正

  4. html input输入时默认启动数字输入法

    当文本框只能输入数字是一个很常见的需求，比如电话号码，身份证号，卡号， 数量....等等只允许数字输入，为了更好的用户体验性，直接写出 启动数字键盘的需求，我和大多数人一样用this.style.imeMode=disabled; imeMode有四种形式，分别是： active 代表输

  5. html禁止手机页面放大缩小代码

    只需网页头部head标签内添加一下代码即可实现禁止手机页面放大缩

随机推荐

  1. JS滚动bxslider的使用

    1. 详细Demo： http://www.bxslider.com/examples 2、如何使用 在实际中如下引用： script type=text/javascript src=js/jquery.js/script script type=text/javascript src=js/jquery.bxslider.js/script bxslider无缝滚动 script type=text/javascript $(f

  2. 手机站布局中viewport的作用详解

    什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动

  3. 仿站小工具 V6.0

    仿站小工具介绍： 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码，提取出JS、Css、Image、Picture、Flash等静态文件网址，再从下载完好的Css代码中提取出Image静态文件网址，通过网址下载静态文件，根据软件设置好的保存规则，自动修正

  4. html input输入时默认启动数字输入法

    当文本框只能输入数字是一个很常见的需求，比如电话号码，身份证号，卡号， 数量....等等只允许数字输入，为了更好的用户体验性，直接写出 启动数字键盘的需求，我和大多数人一样用this.style.imeMode=disabled; imeMode有四种形式，分别是： active 代表输

  5. html禁止手机页面放大缩小代码

    只需网页头部head标签内添加一下代码即可实现禁止手机页面放大缩