首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端不止:Retina屏幕下两倍图

    直到,苹果Retina屏幕的出现,原来小屏幕也可以拥有大分辨率。...以Retina屏幕为例,它并不是像普通显示器那样通过增大尺寸来增加分辨率,而是靠提升屏幕单位面积内的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。...但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点。 对于图片来说也是如此: 这个时候,屏幕会怎么处理呢?...只不过,这里是苹果Retina屏幕的计算方法,一个CSS像素点实际分成了四个,造成颜色肯定会存在偏差(非全保真的显示),于是,我们看上去就变得模糊了(特别是图片,非常的明显)。...不是,一般情况下,不需要针对网站上的所有图片都提供两个版本(非Retina屏幕和Retina屏幕),大部分图片缩放并不会太多的影响用户的体验。

    2.7K50

    使用Microsoft的Retina监控Kubernetes网络

    开源 Retina 使用 eBPF 为 Kubernetes 中的容器网络带来可观测性。...引入 Retina 可观测性平台 成为 开源项目 的最新 Azure 工具之一的是 Retina,这是一种网络可观测性工具,旨在帮助你了解所有集群中的网络流量,无论它们如何配置或使用什么操作系统。...开始使用 Retina 首先 克隆 Retina GitHub 存储库,然后使用捆绑的 Helm Chart 进行安装。你可能还需要配置 Prometheus,以确保 Retina 正在记录数据。...Retina 使用 Inspektor Gadget 跟踪小工具来观察网络系统事件。 观测容器网络 Retina 网站 提供了使用该工具的详细说明。...在安装了 Retina 并配置了 Prometheus 和 Grafana 之后,您现在可以超越默认设置,通过 YAML 配置 Retina 代理和插件。

    10910

    iPhone 各屏幕尺寸及解析

    屏: 1 point = 2 pixel High Retina:1 point = 3 pixel 这里再简单介绍一下Retina这个术语: Retina屏幕是苹果创造的营销名词,而非通用标准...Retina翻译成中文就是视网膜的意,Retina屏的分辨率非常高,以至于你在正常的观看距离无法看到任何像素点。...Retina强调的重点是“分辨率足够高,可以达到眼睛看不出来的地步”。也就是说,苹果为了更好地描述iPhone屏幕分辨率非常高这一特性,而借用并创造了Retina这一标准,并非行业内通用的标准。...苹果曾经给出过一个标准:手机屏幕达到300PPI、平板屏幕达到220PPI、笔记本电脑屏幕达到200PPI即可认为是Retina屏幕。 5....在iPhone 3GS上: 1 pt = 1 px 到了iPhone 4开始,苹果引入了Retina屏幕。在一定物理单位内可以显示2倍的像素。

    3.1K20

    【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

    IOS 图片规格 (1) Retina 视网膜屏 Retina 屏幕简介 :  -- 像素 : 高清晰度的视网膜屏幕, 这种屏幕的分辨率是普通非 Retina 屏幕的 2 倍; -- 市场状况 : 目前...IOS 已经下架了所有的 非 Retina 屏幕的设备, 目前在售的所有设备都是 Retina 设备, 但是之前卖出的许多设备有些不是 Retina 屏幕的; -- 支持 Retina 屏幕的设备 :...现在在售的所有设备, iphone4 ~ 6S, ipod4, ipad 2 之后的新设备; -- 不支持 Retina 屏幕设备 : 之前出售的低端 IOS 设备大都是非 Retina 屏幕的, ipod...1, ipod2, ipod3, iphone, iphone3G, iphone3GS, ipad1, ipad2. -- 素材命名规范 : 非 Retina 屏幕名称为 pictire.png,...~ 6 (Retina @2x) : 120 x 120 ; -- iPhone6 Plus (Retina @3x) : 180 x 180; -- iPad 和 iPad Mini (Retina

    4.9K30

    【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题

    点击上方“前端自习课”关注,学习起来~ 一、问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图: 因为 canvas 不是矢量图,而是像图片一样是位图模式的。...也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。...因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。...举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 屏幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina...完整的demo:https://www.html.cn/demo/canvas_retina/index.html

    2.2K20
    领券