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
312
votes
18 answers

How to capture UIView to UIImage without loss of quality on retina display

My code works fine for normal devices but creates blurry images on retina devices. Does anybody know a solution for my issue? + (UIImage *) imageWithView:(UIView *)view { UIGraphicsBeginImageContext(view.bounds.size); [view.layer…
Daniel
  • 3,331
  • 4
  • 19
  • 17
288
votes
15 answers

How to programmatically get iOS status bar height

I know that currently the status bar (with the time, battery, and network connection) at the top of the iPhone/iPad is 20 pixels for non-retina screens and 40 pixels for retina screens, but to future proof my app I would like to be able to determine…
lehn0058
  • 19,977
  • 15
  • 69
  • 109
226
votes
14 answers

Detect Retina Display

Does iOS SDK provides an easy way to check if the currentDevice has an high-resolution display (retina) ? The best way I've found to do it now is : if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] == YES && [[UIScreen mainScreen]…
Pierre Valade
  • 3,388
  • 3
  • 24
  • 29
114
votes
10 answers

Automatic Retina images for web sites

With the new Apple MacBook Pro with retina display, if you provide a "standard" image on your website, it'll be a little fuzzy. So you have to provide a retina image. Is there a way to automatically switch to @2x images, like iOS (with Objective-C)…
jacoz
  • 3,508
  • 5
  • 26
  • 42
91
votes
9 answers

How to test a website for Retina on Windows without an actual Retina display?

Is there a way to simulate a Retina display on Windows to test a website for HiDPI displays such as Retina? I run Windows on a standard 24" 1920x1080 monitor. Last night I checked out my website on a friends brand new 15" Retina MacBook Pro and the…
Alexander Rechsteiner
  • 5,694
  • 5
  • 34
  • 47
79
votes
7 answers

How to simulate a retina display (HiDPI mode) in Mac OS X 10.8 Mountain Lion on a non-retina display?

How can you simulate a retina display (HiDPI mode) in Mac OS X 10.8 Mountain Lion on a non-retina display?
Dave
  • 12,408
  • 12
  • 64
  • 67
76
votes
7 answers

How to test a webpage meant for Retina display?

I have coded a webpage meant for retina display. I currently do not have a retina display monitor. Is there any simulator application or tool to test web pages for retina display? Or, are there monitors(not Apple's MacBook or iPad) which are similar…
Sangam254
  • 3,415
  • 11
  • 33
  • 43
73
votes
3 answers

Interface Builder degrades storyboards, resizes and repositions views in small increments

We have a number of iOS apps that several different developers contribute to. A problem that I continue to notice is that views in our storyboards will shift out of the position they were put in or resize so that they are smaller, which on labels…
Jeff Lockhart
  • 5,379
  • 4
  • 36
  • 51
71
votes
2 answers

How to support both iPad and iPhone retina graphics in universal apps

Apple presented new iPad that support retina graphics. I saw this link retina graphic in apple apps. As you can see apple just use "@2x" suffix for retina iPad display. I have an universal app. So how to support retina in new iPad and iPhone? Will…
rowwingman
  • 5,589
  • 7
  • 33
  • 50
56
votes
4 answers

What is the best way to detect retina support on a device using JavaScript?

Right now I am using this function: function is_retina_device() { return window.devicePixelRatio > 1; } But its simplicity scares me. Is there a more thorough check?
user967451
48
votes
8 answers

LESS CSS set variables in media query?

I'm working on a iPad-specific website. To make my website work on both the retina display iPad and older versions of iPads, I want to set a variable in LESS CSS in media query like: @media all and (max-width: 768px) { @ratio: 1; } @media all…
Sean
  • 567
  • 1
  • 5
  • 8
40
votes
4 answers

iPhone 5 - what naming convention the new images have to follow?

What name convention the new images have to have to be loaded by the new iPhone 5? We see that we have to have 3 default images to be loaded by the device Default.png Default@2x.png and Default-568h@2x.png what about the other images used by an…
Duck
  • 34,902
  • 47
  • 248
  • 470
37
votes
1 answer

Get device image scale (e.g. @1x, @2x and @3x)

I have an app that uses a service to get some icons. With this service I can get any image of any size, so I've planned to get the 3 images (@1x, @2x and @3x) and store them on the BBDD, and then get the scale to use one of these three; or maybe…
javiazo
  • 1,892
  • 4
  • 26
  • 41
36
votes
10 answers

How do I create a 1px line in Interface Builder?

Note, I'm looking to make a 1px line, not a 1pt line. Meaning it should be 1px regardless of screen scale (so 0.5pt on Retina devices). I can do this programmatically, but can I do it in the Interface Builder? For example I cannot set a UIView to…
i_am_jorf
  • 53,608
  • 15
  • 131
  • 222
34
votes
2 answers

Nesting Media Queries

By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media…
user967451
1
2 3
79 80