文档章节

移动端开发之viewport

L
 LorinLuo
发布于 2016/10/14 14:04
字数 803
阅读 57
收藏 1

参考了很多资料,说说自己对viewport的理解

viewport分visual viewport和layout viewport,visual viewport可以理解为移动设备屏幕的可视区域,visual viewport的大小可以理解为就是品目可视区域的大小,而layout viewport则是存放我们的网页的。

为什么会有两个viewport?

因为早期的网页基本都是pc端的网页,而pc端的分辨率大大高于移动端的分辨率(这里移动端分辨率指的是移动端的物理像素),所以为了能够使pc端的网页能够在移动端上正常显示,所以出现了layout viewport。而浏览器厂商一般将layout viewport初始化为宽度980px,当然也有的不是这个数字。

怎么让layout viewport能够在visual viewport中能够正常显示

这就是缩放因子initial-scale的工作了,initial-scale代表layout viewport与visual viewport的比值,既一个布局像素(css像素)代表几个物理像素,比如initial-scale=2则代表一个物理像素代表两个css像素;当我们没有设置meta的时候,浏览器会自动设置initial-scale,以便让layout viewport能够完全显示在visual viewport中而不会出现横向滚动条,比如你的移动设备物理像素宽度是360px,而layout viewport宽度为980px,则浏览器会自动将initial-scale设置为0.367346,以便不出现横向滚动条。这是3.67346个css像素才站一个物理像素的位置,所以刚好不会出现横向滚动条;当只设置了initial-scale而没有设置layout viewport的时候,浏览器也会自动设置layout viewport,以时layout viewport刚好能在visual viewport中显示,比如initial-scale=2,你的visual viewport是360px的时候,浏览器会自动将layout viewport宽度设置为720px,因为此时一个css像素等于两个物理像素的宽度,所以layout viewport刚好能在visual viewport中显示完全而不出现滚动条。

怎么设置layout viewport的宽度

这就是缩放因子width的工作了,width可以设置为任意的大小或者device-width

width和initial-scale都存在时怎么办

浏览器会设置layout viewport宽度是两者单独存在时计算的layout viewport较大的那一个,因此此时时可能出现横向滚动条的,比如你的visual viewport是360,你设置width=720px,initial-scale=1此时layout viewport大于visual viewport而且一个css像素跟一个物理像素是一样的,所以会出现横向滚动条

ideal viewport

让layout viewport的宽度和visual viewport的宽度相等,并且让1个css像素等于1个物理像素,这就是移动端的最佳viewport,即  

 <meta name="viewport" content="width=600,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no"/>

其他属性

maximum-scale:最大缩放因子

minimum-scale:最小缩放因子

user-scalable:是否允许用户进行手动缩放

height:layout viewport的高度,这个属性基本没有用处

参考链接

http://www.cnblogs.com/2050/p/3877280.html

http://blog.doyoe.com/2015/10/20/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%BA%8C%E5%BC%B9%EF%BC%9A%E5%96%84%E7%94%A8meta/#more

© 著作权归作者所有

共有 人打赏支持
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
Html开发之Viewport的使用

近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试...

LCore
2014/10/19
0
9
移动端Web系列3 -- viewport

写在前面 这里就跳过了文档申明知识的介绍了,这么好的机会还不用html5的,你还在等什么? 概念了解: device pixels and css pixels 概念了解: screen size and window size viewport 由来...

见见
2018/08/27
0
0
移动端布局终极解决方案 ---- hotcss

距离上一次发文貌似有段时间了,可能是最近项目太忙,也可能是变懒了。。总之不管什么原因,开始我们今天的主题:移动端终极解决方案---hotcss(https://github.com/imochen/hotcss)! 介绍 ho...

小草先森
2018/10/30
0
0
rem, vw, 还是...? 各凭本事的移动端适配方案

前言 2018年最后的法定假期都已经结束了,我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案,(没了解过的同学可以...

PandaGao
2018/10/15
0
0
HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223
2017/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android 通知Notify

MainActivity { private NotificationManager manager; onCreate() { manager = (NotificationManager)getSystemService(Context.NOTIFICATION_SERVICE); } public void btnNotify(View view......

Coding缘
6分钟前
0
0
Android 人脸识别SDK开发

目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得 集成 ArcFace FD 的集成过程非常简单 在 ArcFace FD 的文档上...

是哇兴哥棒棒哒
7分钟前
0
0
《市场营销》的读后感作文3000字

《市场营销》的读后感作文3000字: 大家好,这是我领读《市场营销》教材的第一篇读书笔记(不了解此事的朋友请阅读和小马宋一起读《市场营销》)。我们这一周阅读的是《市场营销》(以我手里...

原创小博客
11分钟前
0
0
js判断input输入保留正整数和两位小数实现方法

// 均价 checkKeydown(value, e){ this.registerForm.averagePrice = this.changeNumber2(value) }, // 预算 changsoldBudget(value) { this.registerFo......

五个半柠檬
13分钟前
0
0
Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部