手机站布局中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. 假503错误页面,伪装503错误,503.js代码下载

    在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代

  2. 让position:fixed在IE6下可用!

    /*让position:fixed在IE6下可用!*/ .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;} .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;} .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;} .fixed-right/*右侧固定

  3. 仿站小工具 V6.0

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

  4. Zepto.js手机页面上替代jQuery的最佳Javascript库

    Zepto.js手机页面上替代jQuery的最佳Javascript库,Zepto是现代的浏览器最大程度上与jQuery兼容的API,简约的JavaScript库 ,如果你使用jQuery,你已经知道如何使用的Zepto。 虽然100%的jQuery覆盖率不是一个设计目标, 提供的API相匹配的jQuery的同行 。

  5. 隐藏统计代码的LOGO文字

    网站上添加网站统计代码后,一些情况下会影响网站整体的美观性,我们可以通过以下代码来隐藏统计代码的LOGO或文字。 将各种统计代码放到以下div中即可: 复制代码 代码如下: !--统计代码开始-- div style=display:none; !--百度统计-- script type=text/java

随机推荐

  1. 假503错误页面,伪装503错误,503.js代码下载

    在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代

  2. 让position:fixed在IE6下可用!

    /*让position:fixed在IE6下可用!*/ .fixed-top/*头部固定*/{position:fixed;bottom:auto;top:0px;} .fixed-bottom/*底部固定*/{position:fixed;bottom:0px;top:auto;} .fixed-left/*左侧固定*/{position:fixed;right:auto;left:0px;} .fixed-right/*右侧固定

  3. 仿站小工具 V6.0

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

  4. Zepto.js手机页面上替代jQuery的最佳Javascript库

    Zepto.js手机页面上替代jQuery的最佳Javascript库,Zepto是现代的浏览器最大程度上与jQuery兼容的API,简约的JavaScript库 ,如果你使用jQuery,你已经知道如何使用的Zepto。 虽然100%的jQuery覆盖率不是一个设计目标, 提供的API相匹配的jQuery的同行 。

  5. 隐藏统计代码的LOGO文字

    网站上添加网站统计代码后,一些情况下会影响网站整体的美观性,我们可以通过以下代码来隐藏统计代码的LOGO或文字。 将各种统计代码放到以下div中即可: 复制代码 代码如下: !--统计代码开始-- div style=display:none; !--百度统计-- script type=text/java