CSS笔记(关于viewport)
来源:互联网 发布:淘宝手提包 编辑:程序博客网 时间:2024/06/05 05:39
本文为来自腾讯的干货:深度讲解VIEWPORT和PX是什么及移动前端开发之viewport的深入理解的读后笔记
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中:
width
:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度。initial-scale
:初始缩放比例,也即是当页面第一次 load 的时候缩放比例maxmum-scale
:最大允许的放大比例minmum-scale
:最小允许的缩小比例user-scalable
:是否允许用户缩放
在重构移动端页面的时候,在头部添加上<meta name="viewport" content="width=device-width,initial-scale=1.0">
,就算给元素赋予统一固定的像素值,但是奇怪的是在不同的手机里看起来都差不多大小,不需要另外去适配,这到底是为什么呢?
在此之前,需要先熟悉几个概念:
- 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
- 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如1960*1080。(这里的1像素值得是物理设备的1个像素点)
- 屏幕像素密度(pixels per inch,缩写:ppi):屏幕上每英寸可以显示的像素点的数量,单位是
ppi
,计算方式(计算1080*1920分辨率的5寸手机):- 1、勾股定理算出对角线的分辨率:
√(1920²+1080²)≈2203px
- 2、再用对角线的分辨率除以屏幕尺寸:
2203/5≈440ppi
- 1、勾股定理算出对角线的分辨率:
- 打印点密度(dots per inch,缩写:dpi):最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。
- 密度独立像素(density independent pixels,缩写:dp,dip):可以想象成是一个物理像素(px)的中介转化物理尺寸,使同样的设置在不同手机上显示的效果看起来是一样的,比方说:以打印点密度为160dpi为基准,1dp=1px。若密度是320dpi,则1dp=2px,以此类推。而Android和IOS都会通过转换系数让控件适应屏幕的尺寸,举例子:一个按钮给了44*44
dp
的大小,在160dpi
密度的时候,按钮就是44*44px
大小;在320dpi
密度的时候,按钮就是88*88px
的大小。不需要我们去书写多套尺寸。(即我们设定的css中px代表的并不是真正意义上的物理像素px
,而是密度独立像素dp
)
上述的dp
与px
数值对应的基准由屏幕像素密度而定(屏幕像素密度与打印点密度概念相同)
dpi
)dp
与px
数值对应关系dpi
1dp
= 1px
~120dpi
:idpi;120
dpi
~160dpi
:mdpi 160dpi
~240dpi
1dp
= 1.5px
hdpi 240dpi
~320dpi
1dp
= 2px
xhdpi 320dpi
~480dpi
1dp
= 3px
xxhdpi 480dpi
~640dpi
1dp
= 4px
xxxhdpiViewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,窗口可大于或小于手机的可视区域,一般手机默认viewport
大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。
其中:
- layout viewport:手机默认的
viewport
称为:layout viewport,其宽度可用document.documentElement.clientWidth
获取 - visual viewport:浏览器可视区域称为:visual viewport,其宽度可用
window.innerWidth
获取,部分如UC8浏览器不支持该方法获取 - ideal viewport:不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;其次显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示大小都是差不多的。这样的viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。
那么如何得到ideal viewport呢?可以在头部meta
标签中设置viewport
中的width=device-width
,如:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
width
:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)initial-scale
:初始缩放比例,也即是当页面第一次 load 的时候缩放比例maximum-scale
:允许用户缩放到的最大比例minimum-scale
:允许用户缩放到的最小比例user-scalable
:用户是否可以手动缩放
假如没有设置这样的viewport
,那么网页重构时,移动端就会设置默认的viewport
,如iPhone4S如果不设置viewport,他就会默认是980px(注意这里讲的是layout viewport,而不是屏幕分辨率的640px),那么设置一个元素为100px*100px,看起来就是屏幕的100/980。各手机默认的layout viewport,如图
但设置viewport属性width=device-width
,他就会是320px,就像把屏幕分成320份,看起来就是屏幕的100/320。
那么设置了viewport,width=device-width
,弹出来的是设置好的宽度,375px、360px、320px。为什么是这个大小?这就要用到上面讲的知识点了,举例子:
iPhone6的屏幕分辨率是1334*750px,ppi是326,所以系数是2x。那device-width
就等于750/2=375px。
- CSS笔记(关于viewport)
- 关于viewport
- 关于像素,分辨率,viewport,设备像素,css像素,Retina
- 关于viewPort的研究
- Viewport学习笔记(一)
- viewport知识之笔记
- 关于viewport的一些问题
- css3关于device-width /Viewport
- 关于viewport的一点自学
- HTML5学习笔记之viewport
- 关于CSS样式的笔记
- 个人笔记 关于css的
- 日常辨析(viewport)
- viewport
- ViewPort
- Viewport
- Viewport
- viewport
- 深度学习各领域小结
- mysql 时间戳转换时间字符串
- jsp-获得网站的绝对路径
- PowerDesigner证书过期的解决方法——替换pdflm16.dll文件
- 并查集(按秩合并)
- CSS笔记(关于viewport)
- 几种 IO编程比较
- 解决mac os You don't have permission to access / on this server.
- CodeForces 466E Information Graph --树形转线性+并查集
- 深入理解Spring MVC 思想
- Educational Codeforces Round 27 ABCD
- ubuntu浏览器的代理服务器的问题
- Liferay访问时,根据不同用户角色跳转到不同登陆页面
- springmvc,reids框架搭建