首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

2.7K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Retina屏科学原理

    然而,联想到 iPhone4/4S 配置的 326ppi 分辨率的 Retina 屏幕,新 iPad 的屏幕究竟是不是“Retina 屏”引发了一些争议。 ? 那 Retina 屏幕究竟是如何定义的?...为何分辨率 264ppi 的新 iPad 屏幕也被称为 Retina 屏。接下来,我们做一个较深入的了解。 乔布斯为何提出300ppi?...2) 新 iPad 屏幕分辨率 264ppi,如果使用距离为 15 吋(约 38 厘米),超过了这个距离上 Retina 屏幕标准的 23%。...Apple 当前主要retina屏幕计算方式: ppi = (w x w + h x h)^ (1/2) / size  (其中, w是屏幕宽度, h是屏幕高度, size是屏幕对角线长度, 单位都为英尺...新iPad究竟是不是Retina屏 关于视网膜屏幕的非官方问答 Android的计量单位px,in,mm,pt,dp,dip,sp Android 获取屏幕尺寸与密度

    2.2K30

    使用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 代理和插件。

    12410

    【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,...px; -- 57 px : 10 px; -- 58 px : 10 px; -- 29 px : 9 px; (3) 应用图标规格 Retina 屏幕应用图标规格 :  -- iPhone 4S

    4.9K30

    iPhone 各屏幕尺寸及解析

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

    3.2K20

    【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )

    文章目录 一、Android 与 iOS 屏幕宽高比种类 二、屏幕像素密度 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一、Android 与 iOS 屏幕宽高比种类...---- Android 屏幕尺寸类型如下 , 安卓设备的屏幕尺寸复杂性远远高于 iOS 设备 , Android 设备有两万种屏幕类型 , iOS 只需要适配五种分辨率即可 ; iOS 屏幕尺寸如下..., 只需要适配有限的几种屏幕类型即可 ; 二、屏幕像素密度 ---- 屏幕像素密度 的单位是 DPI , 是 Dots Per Inch 的缩写 , 也就是每 英寸 的 像素点 个数 ; 屏幕尺寸...指的是 屏幕 斜对角的 英寸 长度 ; 假设屏幕尺寸为 6.5 寸 , 屏幕的宽高分辨率为 1080 \times 1920 , 计算该屏幕屏幕像素密度 ( DPI , Dots Per Inch...3253 ② 然后计算每英寸的像素个数 : DPI = \cfrac{对角线像素个数}{屏幕尺寸} = \cfrac{3253}{6.5} \approx 500

    6.5K30

    【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机平板电脑设备屏幕适配 )

    文章目录 一、屏幕适配限定符 二、手机/平板电脑设备屏幕适配 平板电脑市场占有率 密度无关像素计算 手机设备限定符 平板设备限定符 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持...一、屏幕适配限定符 ---- Android 系统加载应用资源时 , 会根据当前运行应用的设备的相关属性 , 如 : 屏幕尺寸 / 屏幕像素密度 / 宽高比 / 屏幕方向 等属性 , 加载不同的屏幕适配限定符目录下的资源...; normal : 标准屏幕 ; large : 大屏幕 ; xlarge : 超大屏幕 ; 屏幕密度限定符 : ldpi : 低屏幕像素密度 , \rm 0 < dpi \leq 120 ;...\rm 480 < dpi \leq 640 ; 屏幕方向限定符 : 一般是用于横竖屏切换时进行适配 ; land : 横线屏幕 ; port : 纵向屏幕 ; 屏幕宽高比限定符 : 标准屏幕宽高比为...】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客中 , 计算了 6.5 寸屏幕 , 1920 \times 1080 像素的屏幕屏幕像素密度

    7.1K20

    Snagit for mac(屏幕截图和屏幕录制工具)

    Snagit是一款由TechSmith公司开发的屏幕截图和屏幕录制工具,旨在帮助用户在Mac OS X平台上捕捉和编辑屏幕内容。...Snagit for mac(屏幕截图和屏幕录制工具)图片Snagit for Mac主要功能特点:多种截图方式:Snagit支持多种截图方式,包括全屏、窗口、区域和滚动截图等。...图片视频录制功能:Snagit还支持视频录制,可以捕捉屏幕上发生的事件,包括声音、鼠标点击等操作,并进行编辑和导出。...Snagit for Mac是一款非常实用的屏幕截图和录制工具,适用于个人、企业和教育机构等不同领域的用户。...在视频捕获设置中添加了为屏幕绘制对象自定义淡入淡出时间的功能。功能更新添加了在 Screen Draw 处于活动状态时滚动的功能。当用户退出绘图模式时,屏幕绘图对象现在会自动淡出。

    3K00

    【Android 屏幕适配】屏幕适配基础概念 ③ ( 屏幕像素密度 DPI 与素材大小关联 | 屏幕像素密度 DPI 与 屏幕密度限定符关联 )

    文章目录 一、屏幕像素密度 DPI 与素材大小关联 二、屏幕像素密度 DPI 与 屏幕密度限定符 xhdpi 关联 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一...、屏幕像素密度 DPI 与素材大小关联 ---- 屏幕像素密度 DPI 与素材大小关联 : 屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) ,...对应屏幕分辨率 240 x 320 ( QVGA ) , 对应素材放在 素材放在 res/mmap-ldpi 目录下 ; 屏幕像素密度 ( DPI , Dots Per Inch ) 为 160...dpi 时 ( mdpi ) , 对应屏幕分辨率 320 x 480 ( HVGA ) , 对应素材放在 素材放在 res/mmap-mdpi 目录下 ; 屏幕像素密度 ( DPI , Dots...目录下 ; 屏幕像素密度 ( DPI , Dots Per Inch ) 为 480 dpi 时 ( xxhdpi ) , 对应屏幕分辨率 1080 x 1920 ( HD , 1080P )

    3.1K30

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

    也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。...因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。...举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 屏幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina...屏幕上实际会占据 200×200 像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。...完整的demo:https://www.html.cn/demo/canvas_retina/index.html

    2.4K20

    解决canvas在高清屏中绘制模糊的问题

    一、问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图: [img] 因为 canvas 不是矢量图,而是像图片一样是位图模式的。...也就是说二倍屏,浏览器就会以 2 个像素点的宽度来渲染一个像素,该 canvas 在 Retina 屏幕下相当于占据了2倍的空间,相当于图片被放大了一倍,因此绘制出来的图片文字等会变模糊。...因此,要做 Retina 屏适配,关键是知道当前屏幕的设备像素比,然后将 canvas 放大到该设备像素比来绘制,然后将 canvas 压缩到一倍来展示。...举例来说,假设 devicePixelRatio 的值为 2 ,一张 100×100 像素大小的图片,在 Retina 屏幕下,会用 2 个像素点的宽度去渲染图片的 1 个像素点,因此该图片在 Retina...屏幕上实际会占据 200×200 像素的空间,相当于图片被放大了一倍,因此图片会变得模糊。

    6.5K10

    2022史上最全App Store上架流程分享

    ,3.5英寸; 2x: Retina, 3.5英寸; Retina 4: 4英寸的RetinaRetina HD 4.7:高清Retina,4.7英寸; Retina HD 5.5:高清Retina...:因为昨天分享时创建的App项目,被开发人员拒绝一栏,请忽略 再去点击 价格与销售范围 填写一些必填信息,一般是选择App售价,一般选择0即免费 点击 iOS App 填写一些重要的App信息 首先是屏幕快照...,该功能是展示在App Store中的预览图,给用户进行预览用的 如下图 iPhone6.5英寸显示屏,即iPhone Xs尺寸,需要该机型的屏幕快照/截屏 iPhone5.5英寸显示屏,即iPhone...6/7/8Plus尺寸,需要该机型的屏幕快照/截屏 一般来说,上传五张屏幕快照+一个视频。...上传屏幕快照后来到如下界面 再填写其它资料,构建版本是打包上来的(目前步骤还未打包) 接下来选择分级如下图 之前公司的分级编辑 基本为无 选完之后点击完成 默认为4+岁 如图 接下来就是App审核信息填写

    18310

    flutter 屏幕适配

    屏幕适配之屏幕算法 既然是算法适配就必然少不了获取屏幕宽高,我们用的就是媒体查询(MediaQuery), 下面是封装方法过后的,当然直接使用也是可以的: // 整屏宽度 double winWidth...context) { return MediaQuery.of(context).size.height; } 案例1: 蓝湖设计图有一张轮播图,宽度是 335 高度是 120,左右间隔是10, 如何使用屏幕算法适配全机型屏幕宽和高..., color: Colors.amber.withOpacity(0.5), ), child: new Text('模拟图片'), ), 效果 图片 图片 这就是一个普通的屏幕算法适配例子...children: [0, 1, 2, 3, 4, 5].map(buildItem).toList(), ), ); } } 效果 图片 图片 原理: 其实这就是最基本的屏幕算法...,使用的是小学数学里的常用加减乘除,用了多少就用整个的减多少, 很常见也很简单很实用,在企业开发中用到这套就已经能完全适配所有屏幕了,主要是灵活应变。

    1.3K10

    Java|屏幕截图

    于是我就将其分为了几个板块:1屏幕截图,2图片比对获取关键坐标,3对关键坐标进行操作。 其中第一个屏幕截图应该是最简单的。...因为我对编程是以python入门的,python对屏幕截图不是很难,同理我觉得Java也应该不难。 2 Robot类简介 对于java,屏幕截图可以主要通过一个robot来实现。...使用robot类需要导入java.awt包,操作如下 Import java.awt*; Robot类不仅可以做到屏幕截屏,基本上我们能对电脑所有的操作都能通过robot来实现。...throws AWTException,IOException{ //创建一个robot对象 Robot robut=new Robot(); //获取屏幕分辨率...图3.1截图实例 4 结语 初入java,先从简单的屏幕截图做起,然后实现对键鼠的操作,最难的是图片比对,通过不断地学习和钻研都能实现的。

    2.3K20
    领券