Questions tagged [retina-display]

Retina display is a trademark used by Apple for displays claimed to have pixel density so high that the eye would not be able to notice pixelation. The term is used for several models of the iPod touch, iPhone, iPad, and MacBook Pro.

Retina Display is a brand name used by Apple for liquid crystal displays that have a pixel density high enough that the human eye is unable to discern individual pixels at a typical viewing distance. The term is used for several Apple products, including the iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini, and iPad Air. Because the typical viewing distance is different, depending on each device's use, the pixels per inch claimed to be of Retina quality can differ, depending on the size of the display, with higher PPI for smaller displays and lower PPI for larger displays: 326 PPI for the smallest devices (iPhone, iPod Touch, and iPad Mini with Retina display), 264 PPI for mid-sized devices (iPad third generation and onwards, including iPad Air), and 220 PPI for larger devices (MacBook Pro). While not currently common, many other manufacturers' displays have similar PPI density. When an Apple product has a Retina Display, each user interface widget is doubled in width and height to compensate for the smaller pixels. Apple calls this mode HiDPI mode. Apple has applied to register the term "Retina" as a trademark in regard to computers and mobile devices with the United States Patent and Trademark Office, Canadian Intellectual Property Office, and in Jamaica.On November 27, 2012 the US Patent and Trademark office approved Apple's application and "Retina" is now a registered trademark for computer equipment.

Source: Wikipedia (Retina Display)

1188 questions
17
votes
6 answers

DPI in Retina iPad app design

I don't know if this belongs in StackOverflow or some other SE site, but here goes. I have a PSD design I have an iOS development team turning into a Retina iPad app. However, this design is made in the default 72 dpi. The development team is now…
Emphram Stavanger
  • 4,158
  • 9
  • 35
  • 63
17
votes
2 answers

Create dmg with Retina background support?

I need to make a dmg that support both 1x and 2x background, but there seems no info about retina in hdiutil or other tools like dropdmg. I create a normal one and it apparently blurs on Retina MBP. Any one have a solution?
Xiao Xiao
  • 931
  • 8
  • 19
16
votes
3 answers

Retina iPad Specific CSS

I'm designing a responsive site that will look different on mobile devices. I have three separate media queries in my css plus a query for retina display(s). /** 768PX IPAD PORTRAIT **/ @media screen and (max-width: 768px) {} /** 480PX IPHONE…
user127181
  • 735
  • 3
  • 11
  • 32
16
votes
1 answer

Configure the backend of Ipython to use retina display mode with code

I am using code to configure Jupyter notebooks because I have a repo with plenty of notebooks and want to keep style consistency across all without having to write lengthy setting at the start of each. This way, what I do is having a method to…
mar tin
  • 9,266
  • 23
  • 72
  • 97
15
votes
3 answers

CSS Filter on Retina Display: Fuzzy Images

When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy. Note: This only happens on Retina-Displays — no problem at all with 'normal'…
albuvee
  • 2,744
  • 6
  • 28
  • 38
15
votes
1 answer

How do NSBundle pathForResource:ofType: and UIImage imageWithContentsOfFile: handle scale and device modifiers?

In my iOS resource folder, I have the images: foo~iphone.png foo@2x~iphone.png foo~ipad.png foo@2x~ipad.png I load them with: NSString *fileName = [[NSBundle mainBundle] pathForResource:@"foo" ofType:@"png"]; UIImage *image = [UIImage…
Jesse Beder
  • 33,081
  • 21
  • 109
  • 146
15
votes
4 answers

How to create a CGBitmapContext which works for Retina display and not wasting space for regular display?

Is it true that if it is in UIKit, including drawRect, the HD aspect of Retina display is automatically handled? So does that mean in drawRect, the current graphics context for a 1024 x 768 view is actually a 2048 x 1536 pixel Bitmap context?…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
14
votes
2 answers

How do I add a high-resolution custom marker on a static google map

I'm using Google static maps (documention here) to show shops' locations, and I'm using a custom marker instead of the default. However, this marker image appears low-resolution on high-resolution mobiles like the iPhone 4. How do I fix it?
gpr
  • 959
  • 1
  • 10
  • 23
14
votes
3 answers

Font sizes in UIWebView does NOT match iOS font size

Here's a UILabel which says "About". Set at exactly 17.7 in iOS. Below it a UIWebView which also says "About". Also set at exactly 17.7 using css. They don't match. How to fix this correctly? It is bizarre that in Apple's own UIWebView, the size…
Fattie
  • 27,874
  • 70
  • 431
  • 719
14
votes
6 answers

UIWebView and iPhone 4 retina display

I have a UIWebView which displays some local text and images. Either I've made a mistake somewhere, or the UIWebView doesn't automatically handle the @2x suffix for high resolution images. So, my question is has anyone else successfully loaded @2x…
Ben Williams
  • 4,695
  • 9
  • 47
  • 72
14
votes
1 answer

How to use srcset and sizes for responsive images

I have following snap-points: 480px, 900px, 1800px, 2400px. and this markup:
user5671193
14
votes
11 answers

Hi-Res @2x image not being picked up for tab bar item

I have a TabBarController that sets the image for the tab like so, in the -init method: self.tabBarItem.image = [UIImage imageNamed:@"tabImage.png"]; I have a tabImage@2x.png file in the resource. In the iPhone 4 simulator or the phone, the hi-res…
psychotik
  • 38,153
  • 34
  • 100
  • 135
14
votes
1 answer

Why does iOS auto layout lead to apparent rounding errors on pre-Retina displays (unit test included)

I'm currently having a hard time understanding why the following unit test fails on an iPad 2. Auto layout seems to slightly (by 0.5 points) mis-position view inside superview relative to the exact centering that's required by two layout…
Drux
  • 11,992
  • 13
  • 66
  • 116
14
votes
1 answer

IE8 fix for background-size property? Retina Image

I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE. Is there a fix for IE for using background-size - and if so, how could I implement it using my current code? CSS: .arrow-big-right { …
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
14
votes
5 answers

iOS apps - why include both @2x and low-res images?

This has been bugging me for a while. I don't understand why one should include low-res images. If a 3GS, for example, can't find the low-res image, it just uses the @2x version anyway and displays it at it's native resolution. So why add to the…
soleil
  • 12,133
  • 33
  • 112
  • 183