学习笔记—前端移动端开发知识点总结
1、什么是viewport,怎么理解
在浏览器中渲染页面,当我们设置
html,body{width:100%;
}
这个时候,body的宽度应该是初始包含快宽度的100%,而初始包含快的宽度为浏览器窗口宽度大小。
按照这个理论来说,在移动端,也是这个道理,width:100%,应该就是移动端设备的宽度;其实不然,在移动端设备和html,body之间还有一层移动端初始包含快:viewport(可以这么理解,正不正确有待考究),而viewport的宽度默认都是980px.
这样用文字表述未免苍白,可以参考下面这个图:
所以从图中我们可以得到结论,一个没有设置过viewport的页面在移动端承载时,一般都会出现横向滚动条,因为页面的宽度980px超过了设备宽度。
所以我们要通过代码来控制移动端viewport的大小,使它的宽度随着移动端设备的宽度而变化。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
理解:
width=device-width:viewport的宽度,可以设置为值,也可以设置为device-width,即设备宽度大小。
initial-scale=1.0:viewport初始缩放值,>1.0放大,<1.0缩小。
maximum-scale=1.0:允许最大缩放值。
minimum-scale=1.0:允许最小缩放值。
user-scalable=0:是否允许用户进行缩放(即手指缩放),1—允许;0—不允许。
2、什么是dpr?
1、设备物理像素(物理像素):一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
自己的理解:
物理世界中,不考虑其它因素是一个物理真实像素点,而它的大小,不同的屏幕能做到的程度不一样,随着技术的不断发展,物理像素的大小被越压越小,屏幕也越来越清晰。
2、设备逻辑像素:设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
自己的理解:每一种型号的屏幕和手机都有固定的尺寸,比如ipone6的屏幕尺寸为:
375✖667;这种像素就叫设备逻辑像素,有规定好的固定大小。
那么一块375✖667的劣质屏幕,和一快375✖667的优质屏幕的区别在哪里呢?
区别在于,不同质量的屏幕的每一个设备逻辑像素点由不同数量的物理像素点组成,如下图所示:
不知道看完这个图大家能不能理解;
知道了物理像素和逻辑像素的区别,也就引申出了dpr这个概念:
3、dpr:设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。
上面图中的dpr应该为4。
3、css中的px像素单位
了解了物理像素和逻辑像素,那么css中的像素单位大小是怎么来确定的呢?
在css中,1px=1逻辑像素,一个css像素和1个逻辑像素的大小是相等的,所以在dpr=2的屏幕中,一个css像素单位的大小=2个物理像素单位
4、为什么优质屏幕更高清?
一块同样大的屏幕,逻辑像素数量相同,但是一块dpr为4的优质屏幕中一个逻辑像素由
四个物理像素组成,也就是说这块优质屏幕的实际物理像素量是普通屏幕的四倍,而屏幕在呈现图片或者视频时,是通过在每一个物理像素上通过颜色,亮度的不同一起组成一张图片或视频帧,所以物理像素更多,它能呈现的画面就越细腻,细节就越丰富。
5、移动端开发怎么让图片和视频显示更为清晰
当ui小姐姐给我们一张图片时,我们鼠标右击查看图片属性:
这里的像素单位也是逻辑像素,属性中xx像素✖xx像素,在前端开发中,呈现在屏幕中也是xx像素✖xx像素,意思就是在浏览器和移动端呈现的也是xx像素✖xx像素的大小,那么怎么做到让同一张图片在普通屏幕和优质屏幕呈现不同的清晰度呢?
ui小姐姐在给前端开发图时,我们会发现有三个版本:
三个大小的图,三个大小的图分别对应三种不同的屏幕,dpr=1,dpr=2,dpr=3,的三种情况,在dpr>1的屏幕中。viewport会这样设置:
//dpr=2
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
用的是中间那张图片,这样就会使图片更加清晰。
原因在于缩小了两倍,像素大小和第一张图是一样大的,但是它包含的物理像素更多,图片显示也就越清晰。
学习笔记—前端移动端开发知识点总结相关推荐
- Python学习笔记:Day13 提升开发效率
前言 最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
- React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境 忐忑的心情 因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
- JavaEE——Spring学习笔记01【Ioc开发的模式】
JavaEE--Spring学习笔记01[Ioc开发的模式] JavaEE--Spring学习笔记02[Spring和Mybatis的整合] JavaEE--Spring学习笔记03[AOP开发] J ...
- springmvc学习笔记(10)-springmvc注解开发之商品改动功能
springmvc学习笔记(10)-springmvc注解开发之商品改动功能 springmvc学习笔记(10)-springmvc注解开发之商品改动功能 标签: springmvc springmv ...
- Android:日常学习笔记(8)———探究UI开发(2)
Android:日常学习笔记(8)---探究UI开发(2) 对话框 说明: 对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 提示 ...
- Android:日常学习笔记(8)———探究UI开发(5)
Android:日常学习笔记(8)---探究UI开发(5) ListView控件的使用 ListView概述 A view that shows items in a vertically scrol ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- 安卓逆向学习笔记:native层开发、分析和调试基础
安卓逆向学习笔记:native层开发.分析和调试基础 本笔记主要是自己看,所以如果有看不懂的地方也请多多包涵,这一篇的笔记主要是<Android应用安全防护和逆向分析>的部分内容. 一 A ...
- nrf52832 学习笔记(一)开发资料汇总
nrf52832 学习笔记(一)开发资料汇总 协议栈和SDK下载地址 nordic官方的sdk分为ncs(nRF Connect SDK)和sdk17(nRF5 SDK)两种,区别是: sdk17不会 ...
最新文章
- 写了一个PPT,用于公司内部培训
- Python 函数初识 (1)
- [YTU]_2800( 逗逗泡泡的保密电文)
- GridView自动排序(原创)
- devc++源文件未编译_悬赏万元,重现「木兰」编程语言编译器
- 从0开始学java视频_Java全套学习视频放送,从零开始一步步掌握Java技能!
- Android中关于Adapter的使用(中)SimpleAdapter
- 【转】Pro Android学习笔记(二六):用户界面和控制(14):RelativeLayout
- python数据结构与算法第10讲_Python数据结构与算法10:基本结构:练习题1
- sql-删除无效sql链接
- 职称计算机internet应用模块,全国职称计算机考试题库(Internet应用XP版模块)
- 用python写一个专属字典生成器
- Java基础——对象和类1(面向对象基本概念)
- python可以这样学豆瓣_用python爬取豆瓣短评,这是我见过最牛逼的教程!
- WindwosAndroid浏览器内核版本检测
- python 画出决策边界_python 画出使用分类器得到的决策边界
- c语言---c语言中的斐波那契数列程序
- What are default and maximum values of dev_loss_tmo in Red Hat Enterprise Linux 6
- python_flask_路由
- Centos6 安装yum 完美安装(转载)