I have an iOS application that is working fine in an iPhone X or XR the only problem is that i see the black areas on top and bottom so the app is not taking the hole of the screen.
Im using Auto Layout option in the Storyboard.
I also was reading that you can fix this by adding a Launch Image specific size to the assets but I just opened my assets and I don't see a new space for iPhone X or XR images.
Im I doing something wrong?
If you are using a LaunchScreen.storyboard with a ImageView you need to uncheck "Use Safe Area Layout Guides" or set Up and Bottom constraints to superview instead of Safe Area.
I'm testing the layout of a PhoneGap app (using the Framework7 framework) in the Chrome mobile emulator (iPhone 6) and the Xcode iOS simulator. However I can't match the vertical layout across both simulators.
The Chrome emulator has a CSS resolution of 375x627, which (I assume) equates to 750x1254 with the device's pixel ratio being '2'.
What I can't understand is that even with a 20 CSS pixel space at the top of the screen for the status bar (40 device pixels), why does the Chrome mobile emulator still fall short of the iPhone 6's native 1334 pixel height?
The Chrome emulator's height seems to be (627x2)+(20x2)=1294... 40 pixels shorter? Am I reading the figures wrong, or is Chrome's iPhone 6 device profile incorrect?
The Chrome mobile emulator is for inspecting the html and css and it does not read any configuration.
In your config.xml you have a setting for the behavior of the statusbar:
<preference name="StatusBarOverlaysWebView" value="true">
If it is set to true, then your html body starts in the top of your screen and you have to add 20px padding to it, otherwise you have the statusbar in your content.
If it is set to false, then the body starts below the statusbar.
I am taking screenshots from my iOS Simulator and trying to put them into iTunes Connect but it continues to tell me that I have the wrong size. They are the same size with the pictures that are already in iTunes Connect. What just happened?
For people who need to scale the window size of the simulator, turn off "Optimize Rendering for Window Scale". It's under "Debug" menu.
It would give you the screenshots of the device dimension.
iPhone 6.5 display screenshot specifications lists iPhone Xs Max and iPhone Xr which is misleading. You must take screenshots using the iPhone Xs Max simulator which generates a 1242x2688 image. iPhone Xr screenshots are 828x1792 and will be rejected.
"Debug > Optimize Rendering for Window Scale" does not exist in Xcode 10.2
Looks like iOS simulator started scaling screenshots. Just check its real size if you are using iOS simulator with non-100% scale.
For Xcode 11.0
Select simulator iPhone 11 ProMax
Window -> Physical size
File -> New Screen Shot
Resolution must be:
1242 x 2688 pixels (portrait)
2688 x 1242 pixels (landscape)
Above will be valid in iTunes Connect for:
6.5-inch Display
5.8-inch Display
For 5.5-inch Display and lower size use iPhone 8+ simulator
Resolutions reference
https://help.apple.com/app-store-connect/#/devd274dd925
I solved my problem this way:
I set simulator to physical size: Window > Physical Size (Shortcut:
command + 1)
I set High-Quality Graphics: Debug > Graphics Quality Override > High Quality
I used Xcode Version 11.3.1 and I make screenshots as follows:
for iPhone 6.5" Display - 1242 x 2688(portrait): simulator iPhone 11 Pro Max
for iPhone 5.5" Display - 1242 x 2208(portrait): simulator iPhone 8 Plus
for iPad Pro (3rd and 2nd generation) 12.9" Display - 2048 x 2732(portrait): simulator iPad Pro (12.9-inch) (3rd / 5th generation)
If you are using Xcode 9. Window > Zoom and take screenshot.
When using the 8Plus simulator all issues might be solved.
Give it a try.
On a 13" MBP using Xcode 11, Simulator using iPhone 11 Pro Max produced 1242 × 2688 screenshots accepted by App Store Connect for 6.5".
iPhone 11 only generated 828 × 1792.
Working for Xcode 9:
Uncheck Optimize Rendering for Window Size in the Debug menu.
Uncheck Show Device Bezels option in the Window menu.
Uncheck Physical Device option in the Window menu. (CMD + 1)
Click Zoomoption again in the Window menu. The simulator will take height equal to Mac's screen height.
In my case resolution of a screenshot is 1242 × 2208 for 5.5" Display and 2048 × 2732 for 12.9" Display(iPad).
Tested on iPhone 7 Plus, 8 Plus & iPad Pro (12.9").
I solved the problem by changing the scale of the simulator : Window -> Scale -> 100%
If you choose an other scale, the screenshots will also be scaled.
None of the above worked for me on XCode 10.2.1. The solution was to set High Quality under Debug --> Graphics Quality Override
For Xcode 12 / Simulator 12
In the Simulator, I had to choose Window > Pixel Accurate (or Command + 3).
On my mac book pro, this makes the simulator taller than the screen, making screenshots with Shift + Command + 5 impossible. Luckily, the Simulator has the Edit > Copy Screen command (or Control + Command + C), which will make a perfect copy of the simulator contents, and which includes the portion of the simulator that you can't see.
Paste the copied screen image into your preferred image editor and save as .png.
There seems to be an issue with some versions of the simulator. Simply setting "Optimize Rendering for Window Scale" as #Semloh suggested wasn't enough for me and my screenshots would be too small as I was doing this on an Macbook Air.
I was able to overcome this by turning bezels off, dragging the window to the bottom of the screen and then resizing it by dragging the top left corner to the top of the screen.
I did this this once/twice for getting iPhone screenshots and 2/3 times for getting iPad screenshots - the window would snap the the full height of the viewport but each screenshot would be successively bigger.
The size of the screenshot will max out at the appropriate size of the device.
Mine wasn't working at all uploading at App Store Connect, so I refreshed the upload page and now it works... give it a try
XCode 13.4.1:
I was trying to take screenshots for the 6.5" category ("6.5 inch (iPhone 13 Pro Max, iPhone 12 Pro Max, iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR").
I was trying in the iPhone 11 Simulator, and tried literally every different configuration available in Preferences and menu bar options. I'm using XCode 13.4.1 and many of the suggestions in this thread don't exist in this version.
I then tried again using the iPhone 13 Pro Max Simulator, and it took the correct size screenshots perfectly. So, my advice is to try another Simulator in the category you need.
I'm developing webpages to be viewd on Iphone. To get exact resolutions on iPhone
I tested following lines of code.
pageWidth = $j(document).innerWidth();
alert(pageWidth);
according to
http://www.iphoneresolution.com/ my Iphone 5 has 640px width,
But when I execute my code I get following alert.
this image is from Simulator, I get the same on my Iphone
Can somebody please tell me what is this so?.
Thanks
screen.width will give you the width of the device's screen.
You'll also want to note that the device's resolution does not correspond with the resolution the webpage displays in.
See http://www.mydevice.io/devices/
I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)
If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?
Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?
That's an intended behaviour.
Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.
As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.
<meta name="viewport" content="width=device-width" />
Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).