移动端适配viewport的概念与理解
一、基本概念
首先,viewport指视口,浏览器上(或一个app中的webview)显示网页的区域。PC端的视口是浏览器窗口区域,而移动端的则存在三个不同的视口:
- layout viewport:布局视口
- visual viewport:视觉视口
- ideal viewport:理想视口
1. layout viewport 布局视口
在PC端的网页的layout viewport即浏览器页面显示的整个区域,也可以理解成网页的绘制区域。而在移动端由于其屏幕较小,无法全部显示PC端页面的全部内容,所以默认情况下(不用<meta name="viewport">
去控制),移动端会指定一个大于其浏览器显示区域layout viewport,一般是980px,如下图所示:
图1
在chrome浏览器上的实验结果,未进行视口控制的页面的默认宽度为980px,即页面在宽度为980px的页面上进行了绘制。
2. visual viewport 视觉视口
visual viewport,顾名思义指浏览器可视区域,即我们在移动端设备上看到的区域。为了区别其和layout viewport的区别,我们看一下下面的图:
layout viewport:
visual viewport:
网页的实际绘制区域视口大小layout viewport比我们在手机上可以看到的大小要大,所以我们手机端视觉视口会出现横向滚动条。
3. ideal viewport 理想视口
所谓理想视口,即页面绘制区域可以完美适配设备宽度的视口大小,不需要出现滚动条即可正常查看网站的所有内容,且文字图片清晰,如所有iphone的理想视口宽度都为320px,安卓设备的理想视口有320px、360px等等。
二、视口的控制
如何进行视口的控制以进行移动端页面适配呢?
我们自然想到,在移动端开发时都会在开头加上这样一行内容用于移动端页面的适配:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
这行代码即用来控制viewport,其中的参数有以下几个:
参数 | 含义 |
---|---|
width | 设置layout viewport的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
下面重点谈一下width和initial-scale
1. width
width用来设置layout viewport的宽度,即页面具体绘制区域的宽度,在不使用<meta>
进行控制视口时,以iphone为例,其会设置视口宽度为980px。
另外width可设置为width-device
字符串,表示设置视口宽度为设备的ideal viewport,如在iphone上为320px。
2. initial-scale
指页面初始的缩放值,其值可以通过如下公式进行计算:
initial-scale = ideal viewport / visual viewport
如initial-scale值为2,ideal viewport值为320px,则visual viewport即为160px,如下图所示,我们设置viewport为:
<meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no">
由于visual viewport小于layout viewport,横向出现滚动条,通过下方375px的div可以看出,visual viewport正好为ideal viewport的一半
关于initial scale的默认值
关于initial scale,在没有使用<meta>
标签时,它的值并不为1,以iphone为例,如图1中的情况
当我们没有使用<meta>
标签时,其layout viewport为980px,但同时我们的可视区域即visual viewport也为980px,正好完全显示了所有的内容,可以通过公式计算此时的initial scale为:
ideal viewport / visual viewport = 320 / 980 = 0.33
所以当没有设置时,iniatal scale并不为1
另外,经过对iphone和ipad等ios设备的测试,不管width设置为多宽,设备都会自动计算你的initial scale值,以使得整个屏幕正好可以容纳整个页面不出现滚动条。如下所示:
移动端适配viewport的概念与理解相关推荐
- 移动端页面不需要在meta加_移动端适配viewport缩放方案
1. 前言 设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸.颜色.位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案. 采用viewport缩放的方案能又 ...
- 移动端适配 viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scable=no ...
- 关于移动端适配,你必须要知道的
关于移动端适配,你必须要知道的 关于移动端适配,你必须要知道的 分享一款前端实用的面试题小程序 建议收藏,微信搜索 MST题宝库 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇 ...
- java中浏览器电脑的分辨率_关于移动端适配,你必须要知道的
原标题:关于移动端适配,你必须要知道的 来自公众号:code秘密花园 导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方 ...
- 前端CSS移动端适配
导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...
- css3vw适配_小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: 使用如下代码就能实现移动端的适配: html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13 ...
- 移动端适配方案以及面试总结(初学者看出来)
移动端适配的方案 概念: 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 方法一:JS动态修改配合CSS预处理器(less) // 计算屏幕宽度 var screen = document ...
- 移动端适配之二:visual viewport、layout viewport和ideal viewport介绍
上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...
- viewport在pc端是否生效_viewport移动端适配
提到viewport移动端适配,那么心中可能有几个疑问? 1.为什么要进行移动端的适配? 2.viewport是什么? 3.如何进行移动端适配? 一.移动端适配的目的: 通常我们在pc上看到的页面都是 ...
最新文章
- 一个事务中 可以查询自己未提交的数据吗_数据库事务的方方面面
- 记一次TIME_WAIT网络故障
- leetcode-44. Wildcard Matching
- C# 操作并口类,并口通信
- 连接mysql语言_杂谈各个语言连接数据库如何实现的-第一讲
- oracle迁移mysql_从自建Oracle迁移至RDS MySQL
- 避免常见的6种HTML5错误用法,如何避免常见的6种HTML5错误用法
- 20165212 预备作业3 Linux安装及学习
- python实战1.0——爬取知乎某问题下的回复
- 此项目需要迁移_AndroidX 迁移,看完它应该就够了
- 『TensorFlow Internals』笔记_系统架构
- Flutter实战之自定义日志打印组件
- python和java反射_python的反射和自省
- GoogleStyle编程代码规范
- 思科 终端服务器的配置
- 俄罗斯FAC认证介绍
- [附源码]计算机毕业设计小太阳幼儿园学生管理系统Springboot程序
- 所有游戏类型简称的意思
- Ethercat 从站开发总结一:协议总结
- 计算机图形学 (二) 图元的属性 - 概念、轮廓
热门文章
- 数字IC设计/FPGA工程师秋招面经
- Zen of Python(python之禅)
- 数据挖掘 代码整理(1)
- 1028. 人口普查
- //根据身份证号自动生成性别、出生日期和年龄
- 基于Java+SpringBoot+Thymeleaf+Mysql在线考试系统设计与实现
- photoscape x pro中文特别授权版(照片处理工具) v4.1.1
- rtl8192cu_rtl8192cu推荐驱动CentOS 7
- 如何直接打开AutoCAD的DXF文件
- 趣头条们何以成就“无米之炊”