OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

什么是Viewport Meta(width详解)及在手机上的应用


分享到
分类 技术前沿   关键字 前端   发布 kris  1422343074666
注意 转载须保留原文链接,译文链接,作者译者等信息。  
viewport是专为手机浏览器设计的一个meta标签; 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在手机上放大的机制,使用viewport标签可以解决这个问题,如

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

width=device-width: 表示此宽度不依赖于原始象素(px),而依赖于屏幕的宽度,如iphone 4(3.5寸)屏幕的大小相当于电脑屏幕上的320px显示的效果

下图为设置了viewport标签后在手机上的显示效果,注意右侧手机每格代表50个象素,目测为375px,即可能是iphone 6之类机型尺寸显示的效果:






此外viewport port标签还有一些其它属性:

initial-scale:初始缩放比例
maximum-scale:允许缩放的最大比例
minimum-scale:允许缩放的最小比例
user-scalable:是否允许手动缩放


你也可以给width设置一个值,这意味着宽度属性实际上转化为一个最小宽度视图。例如,如果你的布局至少需要500像素宽,那么你可以使用下面的标记。当屏幕宽度大于500像素时,浏览器将扩大视图(而非放大),以适合屏幕:


<meta name="viewport" content="width=500, initial-scale=1">


Chrome 在最新版是更改了一些Viewport的显示机制,参考 Matt Gaunt 的博客 


在 In Chrome M40  ,关于viewport有一个微秒的变化,很可能会给用户带来很大的不同。

Rick Byers (Google工程师,负责Chromebook Pixel)这样描述virtual viewport: 将“viewport”的概念一分为—,即:“layout viewport 布局视口”(固定位置)和“视觉视口”(用户实际看到的)。

做这样的改动是因为,一些之前相对当前窗口位置固定(position: fixed) 的悬浮DIV,比如有些始终在显示在顶部而不随页面滚动的标题栏,因为放大后用户又无法拖动他们,就有可能造成用户无法点击到在县浮框后面的链接,比如 video.js的悬浮标题栏(注* 现在此网站已取消悬浮),当用户放大并滑动后,标题栏始终停留在左侧:




当启用virtual viewport(特定版本的Chrome)以后的,悬浮框就可以拖动了,用户终于可以点到后面的链接了:




virtual viewport不需要添加额外的标签。通过这篇Chrome issues 的讨论,可以知道除了Android WebView,其他设备都默认启用了virtual viewport。

注: 根据Google的传统,如果出现一些比较严重的BUG,此功能很有可能会被Revert。之前有过Chrome团队为了让js变得更加“完美”而改变js的传统特性,造成大量BUG后又revert的事件。


结论: 因为某些手机屏幕很小,所以在手机上慎用 position: fixed


社区评论 ( Beta版 )
  • #0 云切再 1497618743601

    引用ds

    fgs fgs fgsfg

    *rgfg***加粗文fgsd*

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. AngularJS在大型单页面应用中的性能优化(一)
  2. 从一行CSS调试代码中学到的JavaScript知识
  3. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  4. AngularJS在大型单页面应用中的性能优化(二)
  5. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  6. 理解Node.js的事件循环(Event Loop)和线程池
  7. JavaScript中的$$(*)代表什么和$选择器的由来
  8. javaScript 依赖管理
  9. 中国互联网2014大事记
  10. io.js新支持的ECMAScript 6功能特性详解
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. io.js新支持的ECMAScript 6功能特性详解
  2. NodeJS连接Redis:安装及开机自动启动设置
  3. Duktape:一个新的小巧的超精简可嵌入式JavaScript引擎
  4. HTML5的TCP和UDP Web Socket API草案定稿
  5. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  6. 基于 Web 的 Go 语言 IDE
  7. Nginx的大计划:将原生支持JavaScript
  8. 不需要密码的登录
  9. 15个最好的HTML5前端响应式框架(2014)
  10. Go 语言基础教程:10分钟入门

 关键字 - 前端
  1. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  2. 用纯css改变下拉列表select框的默认样式
  3. AngularJS在大型单页面应用中的性能优化(一)
  4. 我们抛弃了AngularJS:单页面应用的5大缺陷
  5. 5个经典的前端面试问题
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 超简易——Bootstrap可关闭tab标签页
  8. 什么是Viewport Meta(width详解)及在手机上的应用
  9. Animate.css让添加CSS动画像喝水一样容易
  10. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号