This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
iPhone 5 CSS media query
The iPhone 5 tech spec states screen dimension of 1136 by 640
My question is this,
For landscape, ff I am to use the max-device-width of 568px
refer to http://www.stephentgilbert.com/mediaqueries/#iPhone
can you explain why that works when the dimension stated on the iPhone 5 site says the width would be 1136px
I know I'm mixing up with some of the fundamentals here. I'd appreciate if you could provide me with a proper explanation and perhaps link me to relevant online resources.
The iPhone's Retina display means the 1136x640 screen uses 568x320 virtual pixels. Each CSS pixel is made up of four physical pixels (2x2).
Since no one who says "give me a 100px wide div here" in CSS wants it to show up at half-size on a higher-resolution device like a Retina display, it doesn't use the physical pixels as CSS pixels.
The Retina display contains twice as many pixels as the standard display, but iOS treats the resolution as the standard display for measurement and screen output. If it didn't, websites would all look very tiny and zoomed out.
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to deal with iPhone 5 screen size?
So with the release of iPhone 5 today and a larger screen height, how do we accommodate for different screen sizes across the different iPhone variants in our apps. I understand that apps which are not updated for iPhone 5 will be "letter boxed", but what about backwards compatibility?
Is there a way to check whether the app is running on an iPhone 3, 4 or 5?
You normally don't need that, because checking the hardware is not the right approach.
If you need to base decisions in your app on the screen size, like accomodate to the screen size for your UI, you should… test the screen size, not make some conditions on the hardware. Always test what is really necessary.
Use [UIScreen mainScreen].bounds for that (as you should always have done). Note that even before iPhone 5, one could plug its iPhone on a videoprojector or external screen and display its app on a screen with different resolution than the iPhone. That's why I hope that you never use magic numbers in your code (And if you did, you know why it's bad now ;)) and was already using constants or asking at runtime for the size of your screen.
Anyway, to accomodate for different screen sizes, if you configured your autoresizing mask correctly in your views, your applications will resize automagically. You just need to provide a Default-h568#2x.png launch image and your app will take the full size of the 4" screen.
Moreover, starting iOS6, you will be able to use AutoLayout to do finer constrainted layout of your views. See the WWDC'12 videos sessions that explains it in detail.
Checkout the UIDevice-Hardware extension, it was even recently updated to add support for the iPhone 5.
I have a multiplatform iOS/Android game that I programmed in Cocos2d-x. I have only one set of images to use (I'm only after high res devices) that get scaled according to the device's resolution. For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
This works fine for all Android devices and on iPad, iPad2 and old iPhones, but with Retina iPhone there is a problem. On the iPhone 4 all my images look extremely pixelated, a result from the images being scaled to iPhone non-retina resolution then scaled back up to fill the screen.
I tried enabling Retina Mode and the images are half of their intended size (maybe due to the usage of get winsize() which uses points) and scaling manually causes other sorts of problems. I tried playing with a lot of options and attributes but to no avail, so what should I do now?
EDIT:
This is not only a graphics issue, as text gets automatically scaled down then up and appears pixelated.
EDIT 2:
Fonts are bitmaps so my bad. But I don't want to use retina as all images are already retina by default. All of my images are set up for the iPad so for iPhone 4 I just scale them down a bit. This works with Android phones.
For example I have an image, depending on screen resolution obtained through getwinsize():
If current resolution width is 1024 then image stays the same.
If current resolution width is 900 then image gets scaled by 900/1024, no problem.
If device is iPhone 4 resolution width is 480, so image gets scaled by 480/1024, then cocos2d-x automatically scales the resulting image by 2 thus the pixelation. I tried using getwinsizeinpixels, I tried multiplying the screen size, I tried many things but nothing worked out of the box unless I am to redo many of my code.
So the question is, how can I just let the damn engine treat the iPhone 4 as an Android phone with resolution of 960x640?
If you want Retina resolution images to look like Retina resolution images, then those images need to be in Retina resolution (960x480).
If you first scale down the image to 480x320 and then upscale it on the device, it will of course look blurred. You can't magically make the Retina pixels appear from a lower resolution image by scaling it up.
SI couldn't get to the bottom of it so I employed a hack. I enabled Retina Display then I scaled everything x2 through code except for the text. Sounds stupid, but it worked, and pixelation is gone. Thanks everyone who spent time trying to help me.
I tried enabling Retina Mode and the images are half of their intended size
when you enable retina support, cocos2d gets images by appending #"-hd" to their provided filenames. Such images are meant to be double the "visual" size (in iOS terms, pixels vs. points), so that they can be sort of scaled down to make full use of device resolution.
If you have a look at the CCDirectorIOS class, you will find there a couple of methods dealing with this, especially those dealing with the scalingFactor. I don't know what kind of changes you should do to make it work, but if you step into those methods and look at the value of various objects, you might find a way to modify cocos2D default behavior for your specific case.
If this seems to complicated, one thing you could try is changing the CC_RETINA_DISPLAY_FILENAME_SUFFIX so that cocos2d will not look for specially-named files for the retina iPhone, but just use the normal ones.
For example all images are for the iPad but if you are using a Galaxy S then the image locations and scaling are affected by GalaxyS_screenWidth/iPadscreenWidth.
Another thing you might try is not using winSize, but winSizeInPixels, so that when you scale down, you down do it down to the point resolution, but just to the pixel resolution (which is double the point resolution).
Hope this helps.
I have the following problem. My application has a tab bar at the bottom and a simple TextView above. In order to fit well TextView above tab bar I had to resize it (I did it through Interface Builder) - I just set height to 401px (usually I hate to do such things).
Then I have tested application on the simulator, to my surprise everything looked o.k. on both standard iPhone display and Retina display. Since I do not have an iPhone I am wondering if everything would look good on the real device as well.
So, my question is: how to set the UIView size so it follows best practices and, what is more important, GUI looks good on both Retina and older display.
BTW: I know how to deal with icons and graphics to make them look good on Retina and older display, I've read all the relevant stackoverflow posts on the subject :)
Size is same on both standard and retina display. It's measured in points. Number of pixels depends on display density.
Pixel != point.
Look at UIScreen scale property. For standard screen it contains 1.0 and 2.0 for retina (iPhone 4). It can contain different values, even not integers.
If you set size UIImageView size to 100x100, it will have same physical size on standard and retina display. But on retina, it will show you much nicer image, because 100 points contains more pixels.
The units in Interface Builder are now interpreted as points not pixels. Therefore it will look the same on both types of displays. On old displays 1 point equates to 1 pixel. On Retina displays 1 point equates to 2 pixels.
What pixels per inch settings do iOS 4 graphics need to be to support the high resolution display? Should I just use the standard 72, or should I specifically make images that are 320x480#163ppi and 640x960#326ppi? Or, should I just make images those dimensions and not worry about the resolution (i.e. leave it at the default 72)?
I'm not concerned about the iPad, only iPhone 3/GS, iPhone 4 and iPod Touch users.
Note
I realize this isn't about code, per se, but it is related to programming in so much as this is necessary for me to finish my iOS application ;)
Icon and image sizes are documented at https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/
326 ppi as that is the resolution of the retina display. They will resize/resample automatically on lower resolution displays.
Here is some more guidance:
http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/
What image resolution can/should be used for the icon.png file for an iPhone app? I know the size is 57 x 57 but what about the resolution?
Resolution only matters when you are trying to match the size of an image across multiple devices (print, screen, etc)
App icons are always 57x57 and will display without any scaling thus resolution doesn't matter (you could save it as 72dpi, 65535dpi or missing the dpi metadata entirely--SpringBoard won't care and will draw it the same in all three cases)
Here is the link to Apple guidelines, with the sizes for iPad, iPhone retina, etc:
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html#//apple_ref/doc/uid/TP40006556-CH19-SW1
The "resolution" matters, but don't confuse "resolution" with dpi. Dpi is a measure used for printing, it means "dots per inch". It works like this: if you have an image of 100 x 100 saved at 100dpi, it will measure on paper exactly 1 inch (100 pixels per inch).
The dpi for the icons doesn't really matter, as they are intended for screen display only, not for printing.
It is customary to save images as 72dpi - the so called "screen resolution", because the old 14'' monitors (remember those?) could only display a maximum of 72 pixels per every inch of screen. This is no longer true, especially for the "retina" display of the iPhone. It has a much denser screen resolution, it can show much more pixels in a single inch than the older models of the iPhone. This is why you have to save 2 icons: one for retina display at 114 x 114 pixels, and another for the older iPhones, at 57 x 57. Again, the dpi doesn't matter, because whatever dpi you choose, the number of pixels on your image does not change: it would always have exactly 12,996 pixels (114 x 144).
I have had the best luck submitting to the App Store with 72dip, 57x57 icons.
I only want to say that the DPI (or resolution) is a value that only makes sense when an image is printed. The DPI acronym stands for Dots Per Inch, and it only tells the printer to draw that specific number of pixels by inch of paper. While working on screen devices, the DPI isn't important at all.
If creating new images for the iPhone work with the image size in pixels i.e. 57 x 57 for icons. If you work with image sizes set in millimetres or inches, you'll find that 10mm on your monitor equates to only 4.4mm on the iPhone. The iPhone resolution is 163ppi which is over twice (2.25) the 72dpi resolution of a normal monitor. There is another good reason for the question, in that you may need to provide larger images for marketing (websites, blogs, banner ads, or even printed material) requiring zoomed in images that remain super sharp. In these general wider use cases I prefer to work at 300 dpi at the largest target size and then resize/resample image and resolution when done.
57 x 57 and Apple takes care of the rest. Apple suggests that you have larger, more detailed graphics for, in the event, that your app gets selected as a feature app.
The iPhone 3GS and prior display is 163dpi, so if you intend to create icons that are of a particular size relative to how they are shown, that should give you enough information. Note that the icon must be 57x57 pixels to be shown at that dpi.
The iPhone 4 and later and the fourth generation iPod touch and later have 326 dpi displays, and the icon must be 114x114 dpi to be shown at that dpi.
57x57, as said.
You can chosse by code if let Apple to add the "shiny effect" or if you'll do (or not) it by yourself