学习
实践
活动
工具
TVP
写文章

C Retina

17920

Retina屏科学原理

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

83830
  • 广告
    关闭

    2022腾讯全球数字生态大会

    11月30-12月1日,邀您一起“数实创新,产业共进”!

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

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

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

    1.1K50

    retina屏中实现1px border效果

    通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 ://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md http://css-tricks.com/snippets/css/retina-display-media-query

    31120

    retina屏中实现1px border效果

    通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 ://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md http://css-tricks.com/snippets/css/retina-display-media-query

    60670

    retina 屏中实现1 px border 效果

    设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的 border-image: 通常手机端的页面设计稿都是放大一倍的,如:为适应 iphone retina ://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md http://css-tricks.com/snippets/css/retina-display-media-query

    66300

    iOS 7 Web App的初级优化之道

    -- iOS 7 iPad (retina) --> <link href="/static/images/apple-touch-icon-152x152.png" -- iOS 6 iPad (retina) --> <link href="/static/images/apple-touch-icon-144x144.png" 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 -- iOS 6 & 7 iPad (retina, portrait) --> <link href="/static/images/apple-touch-startup-image

    35770

    使用Go语言访问JSON数据(gojsonq)

    website":"www.example.com", "items":[ { "id":1, "name":"MacBook Pro 13 inch retina ", "price":1350 }, { "id":2, "name":"MacBook Pro 15 inch retina", = nil { log.Fatal(jq.Error()) } fmt.Println(res) } 输出结果 MacBook Pro 15 inch retina Example Only("name", "price") fmt.Println(res) } 输出结果 [map[name:MacBook Pro 13 inch retina price:1350] map [name:MacBook Pro 15 inch retina price:1700] map[name:HP core i3 SSD price:850]] Example 3 Query select

    1K20

    iOS Android 移动设备中的 Touch Icons

    href="apple-touch-icon-72x72-precomposed.png"> 在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 版本…… 一句话,挺烦了,国外有人给出了下面的比较涵盖 -- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed -- For iPad with high-resolution <em>Retina</em> display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed

    1.2K60

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

    is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina indicates a classic 96 DPI (76 DPI on some platforms) display, while a value of 2 is expected for HiDPI/Retina Enabling your canvas to appear crisp on Retina as well as standard-definition displays is as simple as Retina devices have a pixel ratio of 2 because there is a 2:1 ratio of display pixels to backing store (scaled to account for extra pixel density). var scale = window.devicePixelRatio; // Change to 1 on retina

    71520

    那些延时加载图片的开源插件

    这是一款十分轻量级的片时图片加载组件 支持现代浏览器及IE7+, Github上面有将近3K个star(关注) 使用 一般图片 对于支持 retina (视网膜屏幕) 设备 <img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> 应用 $(document echo.render(); //手动触发调用 </script> </body> layzr.js 前几天刚刚发布的一款Image Lazy Loading组件,小,快,无依赖(不依赖jQuery),同样支持retina script src="layzr.min.js"></script> <img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina ="optional/retina/image"> <script> var layzr = new Layzr({ attr: 'data-layzr', retinaAttr: 'data-layzr-retina

    34740

    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倍的像素。

    52120

    VMware Fusion Pro 11 Mac中文激活版(vm虚拟机)11.5.7

    Retina 和 5K 显示屏就绪:VMware Fusion Pro Mac在最新 5K iMac 显示屏上的显示效果非常棒,并且支持 Retina 和非 Retina 混合设置。 轻松地将标准 DPI 显示屏与 Retina MacBook Pro 结合使用或向设置中添加 4K 显示屏。无论使用哪种显示屏,Fusion 都可以让 Windows 的外观比以前更加漂亮。

    20040

    【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

    41520

    通过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

    3.8K40

    HTML head 头标签 总结

    -- iPad,72x72 像素,可以没有,但推荐有 --> Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 <link rel="apple-touch-icon-precomposed -- <em>Retina</em> iPhone 和 <em>Retina</em> iTouch,114x114 像素,可以没有,但推荐有 --> <em>Retina</em> iPad,144x144 像素,可以没有,但推荐有 <link rel -- <em>Retina</em> iPad,144x144 像素,可以没有,但推荐有 --> IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 -- iPad 横屏 2048x1496(<em>Retina</em>) --> iPhone 和 iPod touch 的启动画面是包含状态栏区域的。 -- iPhone/iPod Touch 竖屏 640x960 (<em>Retina</em>) --> iPhone 5/iPod Touch 5 竖屏 640x1136 (<em>Retina</em>) <link rel="apple-touch-startup-image

    1K70

    下载 raywenderlich.com 上的 iOSandroidUnity 视频、源码

    kind": "watchlist_artwork", "filename": "CG-Int-MyList-06@2x.png", "retina kind": "video_banner", "filename": "CG-Int-VideoBanner-06@2x.png", "retina "kind": "subtitles", "filename": "#164661205.vtt", "retina : "sd_video_file", "filename": "164661205.sd.mp4", "retina : "hd_video_file", "filename": "164661205.hd.mp4", "retina

    1.2K20

    iOS lanchImage 和icon的设置

    -new ios lanchimage 然后将你准备好的图片拖进去 需要适配的是 iphone  ios 8.0 andlater ios 7.0 andLater lanchImage的尺寸是: retina HD 5.5         --- 1241*2208 retina HD 4.7       ---750*1134 iphone portrait 2x    ---640*960 retina

    39150

    扫码关注腾讯云开发者

    领取腾讯云代金券