做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们.

关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容:

Viewport属性详解

Viewport:字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致.

基础写法:

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

参数解释:

width 控制Viewport的宽度,可以指定一个值或者设备的宽度,如device-width为设备的宽度(单位为设备缩放比例1:1的像素),这里设置的宽度等于设备宽度;

initial-scale 初始缩放,即页面初始缩放程度.对应的值是一个浮点值,这里是一个乘积关系,页面呈现大小等于设置的宽度乘以initial-scale的值;

maximum-scale 最大缩放,即允许用户缩放的最大比例,也是乘积关系.一般设置为1:1的比例不会让用户缩放的;

minimum-scale 最小缩放,如上;

user-scalable 用户是否可以手动缩放,一般值设为no,不允许用户缩放;

这段代码的大意是让viewport的物理宽度等于设备的分辨率,不允许用户缩放.

第一次接触移动web的时候不知道该怎么做,就去看天猫的移动站的 view-source 研究了几个小时复制了这一段代码然后开始写第一个webapp了.

这种写法是还原设计稿,让页面保持和设备分辨率一样,不做任何缩放.对于移动web来说需要丰富经验支持才能写好一个好的响应式页面.高质量的页面效果请选择此方案.

特殊写法:

<meta name="viewport" content="target-densitydpi=device-dpi,width=640" >

简单而粗暴的解决响应式方案,不过弊端也比较大需要谨慎衡量.

target-densitydpi 这个属性可以改变设备的默认缩放medium-dpi是target-densitydpi的默认值,如果我们显式定义target-densitydpi=device-dpi,那么设备就会按照真实的dpi来渲染页面.

如果设计稿是按照640px宽度设计的话,制作页面的时候就按照设计稿的原始尺寸制作,页面会默认缩放和手机分辨率一样的宽度显示.会节省很多解决响应式问题的时间.

优点这么突出那么弊端呢,当然也很突出:

  1. 对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害.
  2. 对于Android这么强大的阵营面前,设备都数不清了更别说设备自带的浏览器.web页面会呈现不是满屏显示的情况,右边会出现留白很怪异.

对于第二点我没有找到完美的解决办法.出现这情况可能是target-densitydpi和device-dpi设备DPI之间的换算.选择此方案需要放弃部分用户,所以要衡量得失.(简单而粗暴是有代价的,任需谨慎...)

小结

了解完Viewport对写移动web来说简单了很多,要做的只是拿出实际行动多写了.对于Viewport两种写法可以灵活运用,要做到的是以最精简的HTML、CSS完成页面呈现.

补充

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

minimal-ui iOS 7.1的Safari新增的属性在浏览网页,滚动之后,会触发隐藏 location bar 和 tool bar,但是在iOS 8又给删除了.

HTML5之Viewport详解的更多相关文章

  1. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

  2. HTML5本地存储详解

    HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取.这个概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且 ...

  3. HTML5之SVG详解(一):基本概括

    转载自:http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html 1.背景 SVG是Scalable Vector Graphics的 ...

  4. viewport 详解

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale= ...

  5. meta viewport 详解

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...

  6. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  7. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  8. HTML5 离线缓存详解(转)

    离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  9. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

随机推荐

  1. github Permission denied (publickey)解决办法

    想要玩玩git,参考了网友懒惰之计的一篇Blog<github:如何获取项目源代码 >,按部就班完成了所有的步骤的, 可在测试的时候,遇到了问题,总是报错”github Permissio ...

  2. JAVA byte有无符号数的转换

    如果你只需要对英文文本的每个字节进行数据处理,则无需考虑有符号数和无符号数的转换问题: 但如果你需要对含有中文的文本进行字节处理,则可能需要考虑有无符号数的转换问题. 以下代码均为Java代码. 1. ...

  3. J - A + B Problem II(第二季水)

    Description I have a very simple problem for you. Given two integers A and B, your job is to calcula ...

  4. mysql数据备份和还原命令

    mysql数据库备份和还原   备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfil ...

  5. javascript事件委托和jQuery事件绑定on、off 和one

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  6. JSON互转

    http://www.cnblogs.com/undead/archive/2012/07/18/2594900.html 最近在做一个基于JAVA Servlet的WEB应用以及对应的Anroid应 ...

  7. MEMS加速度计工作原理

    一般加速度计有两块芯片组成,一块是MEMS传感器,另一块是客户化的信号处理芯片. 加速度计也称惯性传感器,因为它的工作原理就是靠MEMS中可移动部分的惯性.由于中间电容板的质量很大,而且它是一种悬臂构 ...

  8. TCP和HTTP

    TCP和HTTP 2013-11-01 11:29 6564人阅读 评论(2) 收藏 举报 分类: 计算机—杂七杂八(15) 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议, ...

  9. Erlang语言介绍

    Erlang (/ˈɜrlæŋ/ er-lang) is a general-purpose concurrent, garbage-collected programming language an ...

  10. 简单Demo的用户登录JSP界面IE、Firefox(chrome) Enter 键提交表单

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...