HTML5之Viewport详解
做移动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宽度设计的话,制作页面的时候就按照设计稿的原始尺寸制作,页面会默认缩放和手机分辨率一样的宽度显示.会节省很多解决响应式问题的时间.
优点这么突出那么弊端呢,当然也很突出:
- 对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害.
- 对于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详解的更多相关文章
- 最全html5 meta设置详解 (转)
meta 详解,html5 meta 标签日常设置 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...
- HTML5本地存储详解
HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取.这个概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且 ...
- HTML5之SVG详解(一):基本概括
转载自:http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html 1.背景 SVG是Scalable Vector Graphics的 ...
- viewport 详解
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale= ...
- meta viewport 详解
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- html5 drag api详解
可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 离线缓存详解(转)
离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
- 转: html5 history api详解~很好的文章
从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...
随机推荐
- win7系统64位plsql的设置
1. Instant Client Downloads for Microsoft Windows (32-bit) 我下载的是: instantclient-basic-win32-11.2.0.1 ...
- <转>GC其他:引用标记-清除、复制、标记-整理的说明
注:本文根据<深入理解Java虚拟机>第3章部分内容整理而成. 对象死亡历程 1.基本的mark&sweep是必须的,后续的都是对他的改进, 2.young代理的survivor就 ...
- Python中安装numpy,scipy,matplotlib安装方法
这个吧,说简单也简单,说难吧我捣鼓了两天才弄出来,真是头发都急白了.其实只要一个网址就搞定了,嘿嘿 http://www.lfd.uci.edu 这里面有你需要的任何东西,当你运行python imp ...
- C#导出Word文档开源组件DocX
1.帮助文档,这东西找了很久,而且它版本很旧,还是英文,W8.1系统上打不开 http://download.csdn.net/detail/zuofangyouyuan/7673573 2.开源网址 ...
- ios html5 长按复制文本
以前做的项目,主要是针对ios的,安卓上面也没有测试. 原理其实是系统自带的功能,那时候借鉴的其他网站,没有试验通过document.execCommand("Copy"),别的j ...
- windows10快捷键
• 贴靠窗口:Win +左/右> Win +上/下>窗口可以变为1/4大小放置在屏幕4个角落 • 切换窗口:Alt + Tab(不是新的,但任务切换界面改进) • 任务视图:Win + ...
- TypeError: 'QueryDict' object is not callable
id = int(request.POST('id')) Error message: TypeError: 'QueryDict' object is not callable Error rese ...
- LINQ to Entities 不识别方法的解决方案
//这样不行 var BrushProducTimeout = aliexpressEntities.CP_BrushProduc.Where(p => p.isActive == true ...
- Oracle EBS-SQL (MRP-4):检查例外信息查询_建议取消_采购申请.sql
select msi.segment1 编码 ,msi.description 描述 ,mr.old_order_quantit ...
- codevs1040 统计单词个数
题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...