一、什么是Viewport

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

二、Viewport基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位是缩放为100%的CSS的像素)

2、height
和width相对应,指定高度

3、initial-scale
:
 初始缩放比例,页面第一次加载时的缩放比例

4、maximum-scale
:
 允许用户缩放到的最大比例,范围从0到10.0

5、minimum-scale
:
 允许用户缩放到的最小比例,范围从0到10.0

6、user-scalable
:
 用户是否可以手动缩放,值可以是:①yes、
true允许用户缩放;②no、false不允许用户缩放

三、关于viewport的一些问题

viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。比如,你拿个3.5寸-320
* 480的iphone3 gs、3.5寸-640 *
960的iphone4或者9.7寸-1024*768的ipad2,虽然设备的分辨率不同,物理尺寸也不同,但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说,你的网站是800px宽,你可以通过设置viewport的width=800,来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。

网上一搜关于viewport的知识,基本上全都是如下信息:

这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一都主流的web
app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。

Meta标签中的viewport属性及含义的更多相关文章

  1. Meta标签中的format-detection属性及含义(转)

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  2. HTML Meta标签中的viewport属性含义及设置

    两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...

  3. Meta标签中的format-detection属性及含义

    format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...

  4. Meta标签中的format-detection属性及含义让IPHONE的数字可以改变颜色

    format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...

  5. Meta标签中的apple-mobile-web-app-capable属性及含义

    这meta的作用就是删除默认的苹果工具栏和菜单栏. content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示.

  6. meta标签中的http-equiv属性使用介绍(转载)

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  7. 关于meta标签中的http-equiv属性使用介绍

    关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...

  8. 【转】meta标签中的http-equiv属性使用介绍

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  9. meta标签中的http-equiv属性使用介绍

      meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta 标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

随机推荐

  1. linux 常用命令学习记录

    rm -f *.sh 2.grep -rn "enng" * 查找文件内容包含enng的文件(注意:文件名有xian的不会查询出) find . ! -name "*.s ...

  2. 深入浅出Mybatis系列(九)---强大的动态SQL

    上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.resultMap>简单介绍了mybatis的查询,至此,CRUD都已讲完.本文将介绍mybatis ...

  3. NoSQL生态系统——事务机制,行锁,LSM,缓存多次写操作,RWN

    13.2.4 事务机制 NoSQL系统通常注重性能和扩展性,而非事务机制. 传统的SQL数据库的事务通常都是支持ACID的强事务机制.要保证数据的一致性,通常多个事务是不可能交叉执行的,这样就导致了可 ...

  4. 多线程完成socket

    //服务器端代码 public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSo ...

  5. php基础_函数和类

    ①函数 1.函数名不区分大小写,变量名区分大小写. 2.require()和include() 区别:函数加载失败后,require给出一个致命错误,include只是一个警告. ②类 1.构造方法 ...

  6. Ubuntu安装node

    #!/bin/bash echo "添加环境变量需要root权限,如无root权限,则不添加环境变量" echo "输入Node下载地址(目前仅支持Node官方网站上Li ...

  7. 提升你的开发效率,10 个 NPM 使用技巧

    对于一个项目,常用的一些npm简单命令包含的功能有:初始化一个文件夹(npm init),下载npm模块(npm install),创建测试(npm test) 和自定义脚本(npm run).但是, ...

  8. HttpServletRequest常用的方法

    假设客户端请求的地址:http://localhost:8082/TestReq/MyServlet/?username=李雷&age=20 request.getRequestURL htt ...

  9. PHP初步(上)

    一.php语法 PHP是一种嵌入式脚本语言,所以,我们需要标记出哪些是PHP代码,哪些是html代码.当html和php代码进行混编的时候,文件必须要以php结尾(否则Apache不会将这个文件交给p ...

  10. Volley之 JsonRequest 解析JSON 数据

    ReqestQueue 和 JsonRequest String jsonUrl = "http://ip.taobao.com/service/getIpInfo.php?ip=63.22 ...