手机站布局中viewport的作用详解
什么是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" />
相关文章
- 几种常用的医院地图API接口地址—百度地图
几种常用的医院地图API接口地址，医疗网站上经常使用的来院路线地图，调用第三方平台提供的地图接口，下面是医疗模板库为大家收集整理的几种常用的地图API接口。 1、百度地图： 网址： http://api.map.baidu.com/lbsapi/creatmap/index.html 2、搜狗地图：
- 隐藏统计代码的LOGO文字
网站上添加网站统计代码后，一些情况下会影响网站整体的美观性，我们可以通过以下代码来隐藏统计代码的LOGO或文字。 将各种统计代码放到以下div中即可： 复制代码 代码如下: !--统计代码开始-- div style=display:none; !--百度统计-- script type=text/java
- 让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/*右侧固定
- html禁止手机页面放大缩小代码
只需网页头部head标签内添加一下代码即可实现禁止手机页面放大缩
- 手机站布局中viewport的作用详解
什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动
随机推荐
- 几种常用的医院地图API接口地址—百度地图
几种常用的医院地图API接口地址，医疗网站上经常使用的来院路线地图，调用第三方平台提供的地图接口，下面是医疗模板库为大家收集整理的几种常用的地图API接口。 1、百度地图： 网址： http://api.map.baidu.com/lbsapi/creatmap/index.html 2、搜狗地图：
- 隐藏统计代码的LOGO文字
网站上添加网站统计代码后，一些情况下会影响网站整体的美观性，我们可以通过以下代码来隐藏统计代码的LOGO或文字。 将各种统计代码放到以下div中即可： 复制代码 代码如下: !--统计代码开始-- div style=display:none; !--百度统计-- script type=text/java
- 让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/*右侧固定
- html禁止手机页面放大缩小代码
只需网页头部head标签内添加一下代码即可实现禁止手机页面放大缩
- 手机站布局中viewport的作用详解
什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动