博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Retina 显示屏
阅读量:5846 次
发布时间:2019-06-18

本文共 525 字,大约阅读时间需要 1 分钟。

Retina 直接翻译是视网膜的意思。

在IT上,是 Apple 公司提出的。

retina 屏指得是那些在正常使用距离下人类无法看见颗粒度得屏幕

颗粒度就是这种东西

基本上只要点够小够密, 那么就看不见颗粒度了

iphone 的 dpi 是 320 以上. 属于上 retina 屏幕.

我们可以通过 css media query 或者 js 来获取 device 的 dpi 

window.devicePixelRatio

单位是 1 = 96 dpi;

Retina屏幕对web的影响

在Retina屏幕下照片会base on 设备的 window.devicePixelRatio 而变大。

比如一张 300px 的相片 , 在一架 devicePixelRatio = 2 的手机上 

会是 600px 的!照片会被放大1倍也就懵掉了!

所以为了迎合 Retina 手机,我们必须具备 600px的照片和一张 300px的照片.

通过游览器 img 标签的属性 srcset="123_big.jpg 2x" 

来自动判断显示哪一张图像。

 

转载于:https://www.cnblogs.com/keatkeat/p/3896511.html

你可能感兴趣的文章
Redis分布式缓存安装和使用
查看>>
PHP环境搭建:Windows 7下安装配置PHP+Apache+Mysql环境教程以及注意事项
查看>>
20天精通 Windows 8:系列课程资料集
查看>>
html5 <figure> 标签
查看>>
linux的I/O多路转接select的fd_set数据结构和相应FD_宏的实现分析
查看>>
Mysql数据库InnoDB存储引擎的隔离级别
查看>>
开源监控软件 Hyperic 的两种插件
查看>>
TOMCAT
查看>>
无土栽培中的物联网技术应用
查看>>
div contenteditable="true"各个浏览器上的解析
查看>>
Spark学习记录(二)Spark集群搭建
查看>>
Python基本数据类型之字典
查看>>
php引用(&)详解及注意事项
查看>>
OSChina 周一乱弹 —— 只要给网,这种生活我能过一辈子
查看>>
短信猫JAVA二次开发包SMSLib,org.smslib.TimeoutException: No response from device解决方案...
查看>>
CloudStack 4.4学习总结之cloudstack-management安装
查看>>
【动弹有奖】——OSC登录并发送动弹分析(附python源码)
查看>>
protocol buffer安装及使用(非常详细)
查看>>
VTSS Error code
查看>>
360提供的Php防注入代码
查看>>