展开

关键词

C Retina

13820

Retina屏科学原理

发布会现场,Phil Schiller 仍称之为 Retina(视网膜)屏。 然而,联想到 iPhone44S 配置的 326ppi 分辨率的 Retina 屏幕,新 iPad 的屏幕究竟是不是“Retina 屏”引发了一些争议。?那 Retina 屏幕究竟是如何定义的? 有些朋友把“分辨率 300ppi”做为了判定 Retina 屏的标准,而 300ppi 与 Retina 屏的联系,始于 WSDC2010、iPhone4 的发布,当时乔布斯说“当手持设备距人眼 10- 这句话有一个“10-12吋”的前提,很明显乔布斯并没有给出 Retina 屏的定义是以“分辨率 300ppi”为标准。 但之后我们都记住了300ppi,部分朋友断章取义就把300ppi当作Retina屏的标准了。?

49530
  • 广告
    关闭

    50+款云产品免费体验

    提供包括云服务器,云数据库在内的50+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

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

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

    直到,苹果Retina屏幕的出现,原来小屏幕也可以拥有大分辨率。 以Retina屏幕为例,它并不是像普通显示器那样通过增大尺寸来增加分辨率,而是靠提升屏幕单位面积内的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。 只不过,这里是苹果Retina屏幕的计算方法,一个CSS像素点实际分成了四个,造成颜色肯定会存在偏差(非全保真的显示),于是,我们看上去就变得模糊了(特别是图片,非常的明显)。 retinajs库----是不是适配Retina屏幕所有的图片都需要切换呢? 不是,一般情况下,不需要针对网站上的所有图片都提供两个版本(非Retina屏幕和Retina屏幕),大部分图片缩放并不会太多的影响用户的体验。

    81050

    retina屏中实现1px border效果

    通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。

    53370

    retina屏中实现1px border效果

    通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。

    18020

    retina 屏中实现1 px border 效果

    设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果首先准备一张符合你要求的 border-image:通常手机端的页面设计稿都是放大一倍的,如:为适应 iphone retina

    57800

    通过Xcode命令行编译

    (3.5-inch), iPhone Retina (4-inch), iPhone Retina (4-inch 64-bit), iPad, iPad Retina, or iPad Retina 支持的版本 一个IOS版本 下表是iOS模拟器APP支持的所有key key 描述 Value platform unit测试支持的平台 iOS模拟器 name unit测试模拟器的名字 iPhone Retina (3.5-inch), iPhone Retina (4-inch), iPhone Retina (4-inch 64-bit), iPad, iPad Retina, or iPad Retina 模拟器xcodebuild test -scheme MyiOSApp -destination platform=iOS Simulator,name=iPad测试MyiOSApp用7.1iPhone Retina (4-inch 64-bit)模拟器xcodebuild test -scheme MyiOSApp -destination platform=iOS Simulator,name=iPhone Retina

    2.5K40

    HTML5中meta属性的使用详解

    iPhone 和 iTouch,默认 57x57 像素,必须有iPad,72x72 像素,可以没有,但推荐有Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 Retina iPad,144x144 像素,可以没有,推荐大家使用title最好限制在六个中文长度内,超长的内容会被隐藏,添加到主屏后的标题(iOS 6 新增)7、iOS 启动画面iPad 的启动画面是不包括状态栏区域的 iPad 竖屏 768 x 1004(标准分辨率)iPad 竖屏 1536x2008(Retina)iPad 横屏 1024x748(标准分辨率)iPad 横屏 2048x1496(Retina) iPhone iPhoneiPod Touch 竖屏 320x480 (标准分辨率)iPhoneiPod Touch 竖屏 640x960 (Retina)iPhone 5iPod Touch 5 竖屏 640x1136 (Retina) 当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好8、Windows 8 Windows 8 磁贴颜色Windows

    47431

    【Canvas】:High DPI 下的 Canvas 模糊问题

    is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina Enabling your canvas to appear crisp on Retina as well as standard-definition displays is as simple as On Retina devices, the canvas width and height is doubled to maintain consistent size and position relative memory (scaled to account for extra pixel density).var scale = window.devicePixelRatio; Change to 1 on retina 参考:Window.devicePixelRatio: https:developer.mozilla.orgen-USdocsWebAPIWindowdevicePixelRatio Support Retina

    26520

    iOS Android 移动设备中的 Touch Icons

    )考虑到不同设备的分辨率以及屏幕材质的问题,为了最佳的显示体验,你可以用sizes标签定义下,如: 在apple 开发者官网中,为不同的apple 设备推荐了相应的size,比如:iPad with Retina :144 × 144 pixels 152 × 152 pixels iPhone with Retina:114 × 114 pixels 120 × 120 pixels为什么有个删除线的? 单独考虑apple 的设备,iphone 有无Retina 的,ipad有无Retina 的,ipadmini有无Retina 的皆要一一考虑,还有不同的iOS 版本…… 一句话,挺烦了,国外有人给出了下面的比较涵盖

    1.2K60

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

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

    24620

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

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

    1.2K10

    移动端重构实战系列2——line list

    先说下整个过程中要解决的问题:retina 1px分割线缩进整行点击单页应用或跳转页面如何方便扩展最简模式html结构.line-list>.line-item结构方面,标签可以是ul.line-list active, &:hover { background-color: darken($colorF, 3%); } } &:not(:irst-of-type)::before { 使用伪元素生成retina 1px content: ; @include retina-one-px-border; }}下面解读下上面的scss代码:retina 1px我们在sandal里面封装了个mixinretina-one-px-border item-v-right,具体代码为: border top & bottom%border-tb { position: relative; &::before { content: ; @include retina-one-px-border (top); z-index: 1; 第一个元素点击的时候防止active背景色遮盖了1px } &::after { content: ; @include retina-one-px-border

    14120

    移动端重构实战系列2——line list

    先说下整个过程中要解决的问题:retina 1px分割线缩进整行点击单页应用或跳转页面如何方便扩展最简模式html结构.line-list>.line-item结构方面,标签可以是ul.line-list active, &:hover { background-color: darken($colorF, 3%); } } &:not(:irst-of-type)::before { 使用伪元素生成retina 1px content: ; @include retina-one-px-border; }}下面解读下上面的scss代码:retina 1px我们在sandal里面封装了个mixinretina-one-px-border item-v-right,具体代码为: border top & bottom%border-tb { position: relative; &::before { content: ; @include retina-one-px-border (top); z-index: 1; 第一个元素点击的时候防止active背景色遮盖了1px } &::after { content: ; @include retina-one-px-border

    29480

    【CSS】872- 浅析rem布局方案

    这里说明一下,无论dpr多大,1px的大小通常来说是一致的,这也就意味着,随着dpr的增大,物理像素点会越来越小,这样才能容纳更多的物理像素,才能更高清,更retina? 说完基本概念,来说一下几个问题:retina屏图片模糊首先普及一下位图像素:一个位图像素是图片的最小数据单元,每一个单元都包含具体的显示信息(色彩,透明度,位置等等)那为什么在dpr高的retina屏上反而会模糊呢 在1dpr的屏幕上,位图像素和物理像素一一对应没什么问题,但是在retina屏上,由于一个px由4个甚至更多的物理像素组成,并且单个位图像素不能进一步分割,所以会出现就近取色的情况,如果取色不均,那么就会导致图片模糊 1px的粗细问题由于1px的实际大小是一样的,只是里面的物理像素数量不同,所以如果直接写1px是没问题的,不会出现粗细不同的情况,但是这样一来retina的优势也rem的作用也就没了,其实还是dpr的问题 ,dpr为1,那么1px就是一个物理像素,但是在retina中。

    12120

    买苹果设备需要注意哪些坑

    在 Mac 电脑的选购方面,建议购买 13 英寸 MacBook Pro with Retina 256GB 和 27 英寸 iMac Retina 5K。 1、Retina 还是非 Retina毫无疑问,一定是选 Retina(高清视网膜屏幕)。Retina 屏有着优秀的文字图片浏览体验,这是多年以来 Mac 和 Windows 的显著区别之一。 凡是用过 Retina 屏的,就再也没有回去过。 如今大部分 Mac 电脑都配备了 Retina 屏,未使用 Retina 屏的型号包括 2015 年之前的 MacBook、2012 年中之前的 MacBook Pro 、非 4K5K 屏的 iMac 但需要注意的是,一般只有 4K5K 的外接显示器才有 Retina 的显示效果。

    51990

    iOS 7 Web App的初级优化之道

    apple-touch-icon 这个meta 标签上的尺寸设置兼容到这两个系统就好,然后考虑不同iOS 设备,下面给出了这个不错的代码: 注释中已经有相关说明,这里也不妨累赘下:152x152 : retina iPads on iOS 7.144x144  :retina iPads on iOS 6.120x120  : retina iPhones & iPod touches on iOS 7.114x114  : retina iPhones & iPod touches on iOS 6.76x76  :iPads on iOS 7.72x72  :iPads on iOS 6.60x60 : iPhones

    29770

    基础篇-app上传小准备及上架后搜索不显示

    LaunchImage需要如下尺寸图片(对于拉入工程中的图片名称没有特殊要求,名称随意): 用于 iPhoneX                1125 × 2436                       也就是Retina HD 5.8 用于iPhone6+、7+、8+ 的1242x2208                也就是Retina HD 5.5 用于iPhone6、7、8 的750x1334,                       也就是Retina HD 4.7 用于4寸屏(iPhone55s)的640x1136,            也就是Retina 4 用于3.5寸(iPhone44s)的640x960,                   也就是2x retina 4是指4寸屏,即640*1136。

    42220

    关于优化IPA包大小问题

    armv7sarm64:iPhone6s | iphone6s plus|iPhone6| iPhone6 plus|iPhone5S | iPad Air| iPad mini2(iPad mini with Retina Display)armv7s:iPhone5|iPhone5C|iPad4(iPad with Retina Display)armv7:iPhone4|iPhone4S|iPad|iPad2|iPad3

    43010

    给MacBook写一个更好的Windows触摸板驱动程序

    Retina MacBook?一些非Retina MacBook Pro(2011年和2012年)? 配备Retina显示屏的MacBook Pro(MacBookPro 10,1,MacBookPro10,2和MacBookPro11,1)? (正在进行中)带Retina显示屏的MacBook Pro(2014年,2015年)?(正在进行中)?MacBook Pro 2015,2016,2017

    36110

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券