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又给删除了.
转载于:https://www.cnblogs.com/gzzfans/p/4060139.html
HTML5之Viewport详解相关推荐
- 《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- 《HTML5 Canvas开发详解》——1.7 2D上下文及其当前状态
本节书摘来自异步社区<HTML5 Canvas开发详解>一书中的第1章,第1.7节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区&quo ...
- 《HTML5 canvas开发详解(第2版)》——1.3 本书使用的基础HTML页面
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.3节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- html5硬件接口,HTML5通用接口详解
1.先说几个基本类型: DOMString, boolean, long, unsigned long, double,BmBHTML5中文学习网 - HTML5先行者学习网 NaN(Not-a-Nu ...
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- html5 摄像头 直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5录音兼容性,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...
- HTML5新API详解之历史、地理位置处理、全屏处理
历史 界面上的所有JS操作不会被浏览器记住,就无法回到之前的状态. 在HTML5中可以通过 window.history 操作访问历史状态,让一个页面可以有多个历史状态 window.history对 ...
最新文章
- 3dmax材质通道插件_为什么3dmax插件这么多都不会整合一下呢?
- mysql5.7.安装记录
- DCMTK:将标准图像格式转换为DICOM的实用程序
- 2434: [Noi2011]阿狸的打字机
- python expected an indented block什么意思
- [html] 实现一个页面锁屏的功能
- 5月博客恢复更新的通知
- centos 7增强命令补全
- iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载+使用输出流代替文件句柄...
- c++ PP第九章最后一题
- 脉冲电子围栏在国家公园安全防护中的作用
- keil5破解失败【经验分享】
- Embergen 流体模拟工具
- MYSQL 人民币大写金额转小写
- 一款高仿微信的app供大家参考
- python学习使用easyocr识别图片文字
- MATLAB之自动控制原理(1)
- RK3568-ANDROID11-降频DDR
- Android 图片毛玻璃的实现方法
- 霍华德大学计算机科学,霍华德大学MBA专业怎么样?