iPhone's resolution is 480*320. However, it has a global status bar at the top, and Safari uses an address bar and toolbar. How much vertical space do they take up? Or, what's the resolution on Safari's horizontal and vertical viewable area?
ANSWER SUMMARY
Status bar, 20 px
Address bar, 60 px
Toolbar, 44 px
I measure it at 320 x 356 (but see comment on question about debug bar).
The status bar is 20px high. But you can remove that to get more space. The toolbar is 44px high in portrait.
So, by my measurement, the Safari address / search bar is 60px high.
Not really to do with safari, but a useful link for iPhone dimensions
http://www.idev101.com/code/User_Interface/sizes.html
Related
on iPhone X, UIApplication.sharedApplication.statusBarFrame.size.height is 20.
As you know, on iphone X statusbar height is 44.
Because I set statusbar background using UIApplication.sharedApplication.statusBarFrame.size.height, there's weird blank white rectangle between statusbar and the contents.
But if I set background height 44 manually, that white rectangle disappear.
I cannot understand why UIApplication.sharedApplication.statusBarFrame.size.height is 20 on iPhone X. Do I need to do something else to get statusbar height correctly on iPhone X?
I noticed this too while testing my app on iPhone X. In my case I resolved this issue (status bar height became 44) by using LaunchScreen.storyboard instead of Launch Images. But in general it can be caused by lacking of a launch image with appropriate size for iPhone X (1125px × 2436px), if there is no appropriate launch image, also black stripes may appear at top and bottom of the app.
I'm wondering what the correct sizes are for
1) setting a background image for a UIView on various iPhone devices, including Retina, 4s, 4, etc..
(does the version of iOS matter?)
2) setting a background image for the UINavigationBar, again on those various device versions/os versions
Lastly, how should one go about naming these files. I know that Apple is very strict about naming an image with a #2x.png, with specific names, etc.
If there is documentation that somebody could point to, that would be great as well. I couldn't find anything on the dev website...
Thank you in advance.
iPhone and iPod Touch Screen Pixel and UI Component Dimensions
Notes:
Retina Dimensions are given in parentheses.
All pixel dimensions include highlight or stroke effects. For example, a 30-pixel high button is actually a 29-pixel high button with a 1-pixel highlight on the bottom.
iPhone screen size:
Portrait 320×480 (640×960) pixels
Landscape 480×320 (960×640) pixels
iPhone Nav bar:
Portrait: 44 (88) pixels high
Landscape: 32 (64) pixels high
iPhone Nav bar buttons:
Portrait: 30 (60) pixels high
Landscape: 24 (48) pixels high
iPhone Nav bar button icons: About 20×20 (40×40) pixels (when in Landscape mode, it shrinks the 20×20 (40×40) pixel icon)
iPhone Toolbar: 44 (88) pixels high (does not change)
iPhone Toolbar button: 30 (60) pixels high (does not change)
iPhone Toolbar button icon: about 20×20 (40×40) pixels
iPhone Tab Bar: 49 (98) pixels high (does not change)
iPhone Tab Bar icon: about 30×30 (60×60) pixels
iPad Pixel Dimensions:
iPad screen size:
Portrait 768×1024 (1536×2048) pixels
Landscape 1024×768 (2048×1536)
iPad Navigation Bar and Tool Bars: 44 (88) pixels high
iPad Nav Bar and Tool Bar buttons: 30 (60) pixels high
iPad Nav Bar and Tool Bar button icons: about 20×20 (40×40) pixels
iPad Tab Bar: 49 (98) pixels high
iPad Tab Bar icons: about 30×30 (60×60) pixels
iPad List View: 320 (640) pixels wide.
Follow answers in this link for the basic naming standards for the newer devices. iOS version shouldn't matter, but hardware does.
EDIT
Wow, literally found all dimension on this site Check it out, it has pictures!
Another useful link here.
I built my app, it looked fine in the interface builder, it looked fine on my iPhone. The status bar was showing, so I went into "info.plist" and changed "status bar is initially hidden" to YES. Now when I run the app on my iPhone, buttons near the bottom of the screen have shifted up to what looks like the exact width of a status bar. Although in the storyboard, the buttons appear in the correct position.
If anyone has any input, it will be greatly appreciated. I was just about finished with the app, now I am running in circles trying to straighten this out... I hope someone can make some sense out of all this.
Thanks.
The status bar is a pain in the butt. When you set it initially hidden; it shifts your entire view up 20 px to compensate, which makes a navigationController draw itself up inside the status bar, so you spend your time adding a 20 px y offset to everything.
Yet, when it is turned off, your get a 20 px black space when you decide to hide the navigationBar in the future. It does, however, draw everything correctly.
My advice: Unless your splash screen absolutely must have that extra 20 px, or you are opening with a movie, don't hide the status bar.
What is the maximum possible width that won't cause horizontal scroll bar when the monitor resolution is 1024x768 ?
I tested my self and found out that 1008px but i want to be sure. I want to design the website with maximum possible width that won't cause any horizontal scroll bar at the desktop computers browser and when the resolution is 1024x768px
Thanks for the answers.
From my experience, I would recommend you to set the max width between 980 and 1000 px... It feels nice when the website shows a bit of background on the side(s). But, 1008, as you measured it, it's ok.
Common advice is that for the 1024 resolutions you have a maximum width of around 960 or 980px to work with. But if you really need to get every last pixel in, I can confirm test results from Windows XP running at 1024×768, with Internet Explorer 6.0 fully maximized, gives you a width of 1007px to work with.
ref: http://philfreo.com/blog/largest-website-width-to-support-1024x768-resolution/
I'm having some issues getting high resolution tab bar icons displaying correctly for iPhone 4. Basically I'm using the Apple guidelines of 96 x 64 for high resolution icons, but when I do this, my icon looks like it is being scaled many times in the tab bar icon area and only part of the icon appears. If I set the icon size to 30 x 30, the icon displays correctly in terms of proportions but is not sharp because of the higher resolution of the iPhone 4 display.
I've tried other sizes like 64x64 and 60x60 but I get similar problems.
Any ideas?
you have to add #2x to youre iPhone 4 image..
So if you have a 30x30 image named image.png, make a 60x60 version and name it image#2x.png..
You have to name your icon file with #2x!
But in the attributes inspector you have to fulfill the field "Image" taking off the #2x on the file name:
example:
Original file name:"icone#2x.png"
Image field: "icone.png"