阅读 2614

乔布斯提出的视网膜屏幕是什么概念呢?

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

此文连接上文 《为什么移动端不能像pc网站一样写》 连续观看体验更佳

视网膜屏幕

首先,我们的手机屏幕尺寸是非常多的,但是即使尺寸很多,我们会发现一个很神奇的事情,就是显示上面好像都差不多。

image.png

例如上面的,我们会看到虽然手机尺寸变化比较明显,但是页面显示上,看起来居然一样??分辨率不一样难道不应该是:看着大大小小,每种分辨率的显示都不一样的么?

科普:

这就要感谢乔布斯了。

iphone4的发布会上,乔布斯首次提出了视网膜屏幕的概念,这个的概念可谓是,惊为天人,我们来看下,到底什么是视网膜屏幕

一张图带你了解:视网膜屏幕

image.png

分辨率低手机1的大小 = 高分辨率手机2 * 2的大小

这样屏幕更精致,看上去也不会有大小的变化,像下面这样做

image.png

左边的用300物理像素,右边的用600物理像素,但是...我们也不可能每个手机来一个像素吧???

那要多少设计图?写多少样式??

所以我们必须用同一种单位来告诉不同分辨率的设备,在界面上显示的像素大小应该是多少,这个单位就是设备独立像素

设备独立像素

每个设备都有属于自己的独立像素,通过浏览器的模拟器,我们可以看到,每个设备的独立像素。

那设备独立像素,和我们说的 物理像素之间到底什么关系呢?

  • 设备像素比

    像素比:物理像素 和 设备独立像素的比值。

    这个比值,我们可以利用js进行获取window.devicePixelRatio

    iphone6
    物理像素750 * 1334
    像素比2
    设备独立像素375 * 667

    当然也有设备例外:

    iPhone6 plus
    物理像素1080 * 1920
    像素比3
    设备独立像素414 * 736

    ??????????

image.png

说好的 像素比 = 物理像素 / 设备独立像素呢??

414 * 736 )* 3 = 1242 * 2208
复制代码

说好的 1080 * 1920呢?? 多出来的要怎么办? 放心,手机会自动把 1242 * 2208 的设备独立像素,塞进 1080 * 1920 的物理像素中 大家也可以看到 iphone6 是贴合我们像素比的要求的,所以一般我们拿到的手机设计图,就是 750*1334

安卓的就不要试啦设备,尺寸太多,也不一定严格按照分辨率了。

web 开发

上面看了这么多关于尺寸的内容,但是我们还是不知道应该怎么做,设备独立尺寸和我们写css有什么关系么?或者,怎么让我们设置的 css 就是 根据设备独立尺寸的呢?首先我们要知道,我们原来看到的宽高是怎么来的

div元素300 * 300
iphone6128 * 128
布局视口980
设备独立像素375 * 667

375 / 980 * 300 = 114

根据上面的公式,我们发现,我们只要把布局视口设置为和设备独立像素一致,我们的 css像素 就等于 设备独立像素了

那什么是布局视口呢?

注意!!! 一定不能有缩放,要是 100%

视口概念

视口可以细分为三种:布局视口、视觉视口、理想视口,那分别是什么呢~ 来看看吧

  • 布局视口

    布局视口:是网页布局的基准窗口,在这里只考虑布局,也就是不会有非布局的内容,例如滚动条,例如菜单栏。

    而在移动端,布局视口有一个默认值980px,这保证了PC网站可以在手机上显示(尽管丑丑的)。

    在 js 中可以通过document.documentElement.clientWidth来获取布局视口大小

    image.png

  • 视觉视口

    视觉视口:用户视觉上看到的真实区域,包括滚动条。

    在 js 中可以通过window.innerWidth

    image.png

  • 理想视口

    其实就是我们说的设备独立像素,不过当布局视口和视口一致的时候,那结果就是一样的了。

    在 js 中利用window.screen.width可以获取到

    image.png

未完待续

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

文章分类
前端
文章标签