前端-<基础>-px,ppi,DPR,解决iphone适配问题
2017-07-25 00:20
211 查看
简介
最近才真正的懂了什么是px,本着把问题完全想通的态度,从而探索相应的资料。有感而发,记录一下。什么是px?
px,全称 pixel,翻译过来就是”像素”的意思,代表屏幕分辨率的单位,ex:1366*768px.然而 px并不代表长度单位,px更像是一种色块,比如1366*768px的屏幕的笔记本,这就说明该屏幕上 横向最多有1366个像素的色块,竖向最多有768个像素。1366X768就是这个屏幕上所有的色块,每个色块呈现不同的颜色,而表示不同的文字和图片等等。
为什么px不是长度单位?
为什么px不是长度单位,这时候就要延伸出来ppi这个术语。ppi,全称Pixels Per Inch,表示的是每英寸所拥有的像素(Pixel)数目。
英寸是长度单位,比如114ppi的屏幕,也就是114px的色块=1Inch(英寸),那么此时 1px=1/114Inch(114分之一英寸),假如96ppi的屏幕,也就是96px的色块的=1Inch(英寸),那么此时1px=1/96Inch(96分之一英寸)。他们同样式1px,但长度肯定是不相等的。
ppi的计算公式:
根据勾股定理,√(x²+y²)计算出屏幕对角线上的色块(px)的数量,除以屏幕尺寸,屏幕尺寸也是算的屏幕对角线的长度,计算出每英寸上的色块(px)数量.
DPR又是什么?
DPR 全称device pixles ratio 设备像素比。DPR历史:源于apple公司的iphone手机,为了让用户看的更清晰,结果弄了一个视网膜屏幕,比如iphone 4s,326ppi的屏幕,在当时是普通android手机ppi的两倍,吊炸天啊,其意思就是为了给用户带来更清晰的画面,同样英寸的手机的像素色块数,iphone是android的两倍。
因此DPR为2.
DPR计算公式:
物理像素/CSS像素(单一方向上,x或y方向上)=DPR.
物理像素是什么?物理像素指的就是手机实际的像素,比如iphone5的设备像素为640px*1136px。
CSS像素是什么?也就是浏览器规定的像素,浏览器规定:不管你是普通屏幕,还是吊炸天的视网膜屏幕,默认都是以160ppi的屏幕计算像素,因此 iphone5的css像素约为320px*568px。(还是浏览器叼!)
申明:DPR 2,DPR 3出现在移动端比较常见,然而,笔记本一般都是<=1.0DPR。
解决iphone手机上设置边框1px,实际是2px的问题
综上所述,可以延伸出来,当此手机为DPR=2的屏幕的手机,同时设置了meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”
视口的概念:
布局视口 layout viewport —–网页在开始设计时候的宽度(比如960px)
可视视口 visual viewport—– 浏览器会自动把布局视口缩放至能在手机上显示的可视宽度(缩放比例为 手机设备宽度/布局视口宽度 ex:320/960=0.3)
网页在手机上呈现的 用户的缩放会改变可视视口宽度
理想视口 ideal viewport—— 按照理想视口布局 希望用户不通过缩放 而呈现很好的页面效果 当布局视口=设备宽度的时候 用户就不用缩放就能呈现很好的页面效果
设置理想视口宽度—–
设置布局视口宽度=浏览器默认的设备宽度 (CSS像素,比如iphone 640px,浏览器默认的宽度160ppi下为320px)
如果不设置布局视口的宽度时,布局视口的宽度就是浏览器厂商默认的宽度ex:960px 980px
那么因此实际上,当此手机为DPR=2的屏幕的手机,在浏览器中1px CSS像素=2px的物理像素,也就是代码中1px的色块表示2px的物理色块。这时,解决方案之一就是,根据媒体查询的devicePixelRatio进行相应的缩放就可以实现1px的像素。
为什么会有@2X,@3X图的出现?
这就是针对于不同dpr的设备,1pxCSS像素=多个物理像素而设计的,试想一下,一个320px*568px的图片,在iphone5手里,全屏呈现出来会是什么效果?因为图片是物理像素的,此时真实的物理像素图片,1px对应着2px的手机物理像素,其意思就是手机每1px物理像素对应着0.5px像素点。此时浏览器,320px*568px的图片此时会被强行拉伸到640px*1136px,这样才能满足,1个图片物理像素点对应1个设备像素点(实际图片是0.5px对应1个物理像素点)。因此图片就会模糊,当用了640px的图片时,1个图片物理像素点对应1个设备像素点,才会清晰而不会模糊.
相关文章推荐
- 数据库一些基础知识汇总<键类问题小结>
- 数据库死锁问题 及 解决方法 <收藏>
- 解决用<img src="<%# Eval("ShowPhoto")%>"动态绑定图片,发布到IIS上无法显示的问题
- VM8.0下安装遇到了问题“windows cannot read the<product key> setting from the unattend answer file”解决方法
- phpmyadmin " 无法载入 mcrypt 扩展,<br />请检查 PHP 配置"的问题解决办法
- 添加 <identity impersonate="true" userName="username" password="password"/>,解决问题!
- Tips: 解决XSLT中table内容<br/>换行问题
- 关于Dictionary<k,v>绑定DataGridView的问题以及曲线解决办法
- [问题与解决] java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
- 如何解决服务器CPU使用率过高的问题<一>
- 解决 spring mvc 3.0 结合 hibernate3.2 使用<tx:annotation-driven>声明式事务无法提交的问题
- NoSuchMethodException: org.apache.hadoop.io.ArrayWritable.<init>问题解决总结
- 解决cxf+spring发布的webservice缺少<wsdl:types>和<wsdl:message>标签的问题
- 解决一般共享文件问题<打印机>
- 解决用<img src="<%# Eval("ShowPhoto")%>"动态绑定图片,发布到IIS上无法显示的问题
- 解决 spring mvc 3.0 结合 hibernate3.2 使用<tx:annotation-driven>声明式事务无法提交的问题
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而<ModificationFunctionMapping>元素中没有支持当前操作的<InsertFunction>元素”问题的解决方法
- 如何解决服务器CPU使用率过高的问题<二>
- 简单解决Linq多条件组合问题<转>
- 解决VC6 --> VC2005 --> VC2008 中没有<sys/time.h> 问题