手机站布局中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. 手机站布局中viewport的作用详解

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

  2. window.onerror()的详细用法

    window.onerror = function(sMessage,sUrl,sLine){}; onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:错误信息;发生错误的文件;发生错误的行号。 示例: 复制代码 代码如下: SCRIPT window.onerror=fnErrorTrap; function fnErrorTrap(s

  3. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案,在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白,怎么办? 利用一下代码可以解决离线宝被屏蔽时,去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

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

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

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

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

随机推荐

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

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

  2. window.onerror()的详细用法

    window.onerror = function(sMessage,sUrl,sLine){}; onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:错误信息;发生错误的文件;发生错误的行号。 示例: 复制代码 代码如下: SCRIPT window.onerror=fnErrorTrap; function fnErrorTrap(s

  3. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案,在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白,怎么办? 利用一下代码可以解决离线宝被屏蔽时,去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

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

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

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

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