I am thinking of designing a a website which sort of looks like an app.So im in the process of designing the icons and creating the css for it. I was wondering if I have to do separate icons for iPhone and iPad bcos iPad will surely need bigger icons.Sorry if I posted the question in the wrong section.
Thank You
iOS Human Interface Guidelines - Web Clip Icons:
For iPhone and iPod touch, create
icons that measure:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, create an icon that measures:
72 x 72 pixels
Safari Web Content Guide - Specifying a Webpage Icon for Web Clip:
To specify multiple icons for
different device resolutions—for
example, support both iPhone and iPad
devices—add a sizes attribute to each
link element as follows:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
Since the screen resolution is different for both devices, maybe you'd want to route them to completely different pages based on the user-agent string.
That way, you can design the optimal UI for both devices.
Yes this can be best idea to use separate style sheet
you can use following code -
because difference in DPI you have to use hi DPI for ipad and iphone's icons
Refer the following link.
It contains an iPad like simulator in browser. It has all the images as like the iPad.
Since it is a web content, I hope that you will get some resources from here.
http://alexw.me/ipad2/
Thanks.
Related
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
I'm developing a web application that also has a mobile webapp.
I currently use :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This works great for both iPhone and iPad.
My problem is that I'm using fixed size font (e.g. 18px), but on iPad I would like for it to look exactly as on the iPhone just much respectively bigger.
Is there a way for me to define the viewport in a way that will fit iPhone, and on iPad will look the same just in bigger scale? (like zooming in)?
p.s
I also don't want to stop it from working on android, which it currently does :)
The mobile webapp could be viewed here: HocSpot Mobile, and the webapp here: HocSpot
Why not just use CSS media queries? That will work in a UIWebView.
#media screen and (max-width:1024px) {
// iPad rules
}
#media screen and (max-width:480px) {
// iPhone rules
}
Then you can just style the font sizes with CSS.
Try it out
http://lessframework.com/
In a page I'm making, I'm writing a secondary stylesheet for mobile devices that overwrites selected parts of the first stylesheet.
I'm using media queries in the following way:
<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">
This works for iPhone. My goal is to create a query that will activate if it's an iPhone or Android, and then let the iPad use the standard desktop styling.
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I've used many permutations of various widths, heights, and aspect ratios, but to no avail. Does anyone know a workable way of differentiating between these three?
Any suggestions are appreciated. Thanks!
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I think you're misunderstanding how max-device-width works. Since the max-device-width of an iPad is 780px, it falls below the 800px limit just as validly as the iPhone does.
Try using physical measurements rather than pixels - what you are trying to do is restrict to small screens, independent of resolution. Try
max-device-width:12cm
Which will only match physically small screens, like a phone (no matter how high resolution), but not larger ones like tablets, regardless how the resolutions change in the future.
I am creating an application in HTML and javascript for iPhone and iPad.
I would like to have a splash screen for both devices since they must have different dimensions.
I know that there is a link tag "apple-touch-startup-image" that allows you to specify the link for the splash screen image.
What do I do if I want to specify 2 different links? I put 2 link tags with rel="apple-touch-startup-image" and 2 different URL?
Will the mobile device take the correct one if I respect the naming convention here?
What are the sizes used for the iOS application splash screen?
Thanks!
Just figured out how to do this, and it's similar to the apple-touch-icon setup.
Here's my example:
<link rel="apple-touch-startup-image" href="iPhonePortrait.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="iPadPortait.png" />
Just set the "sizes" attribute to the specific width and height and mobile Safari should match it up correctly. You can see the various width/height values from the link you posted, too. Hope it works!
I don't believe this is possible on web apps. The naming convention in that question will not work, it is for native apps.
I'm not sure what the correct size should be.
Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.
Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.
Apple's own apple.com icon is 129x129!
See my related question:
How do I give my web sites an icon for iPhone?
It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.
Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.
See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:
iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)
Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)
I would go with the Apple's own 129*129
Apple specs specify new sizes for iOS7:
60x60
76x76
120x120
152x152
Whereas old sizes for iOS6 and prior are:
57x57
72x72
114x114
144x144
By the way, precomposed icons are deprecated.
As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
In addition, you should create a 152x152 picture named apple-touch-icon.png.
You might want to know that this favicon generator can generate all these pictures at once. Full disclosure: I'm the author of this site.
The official size is 57x57. I would recommend using the exact size simply due to the fact that it takes less memory when loaded (unless Apple caches the scaled representation). With that said, Rex is right that any square size will work
I don't think there is a "correct size". Since the iPhone really is running OSX, the icon rendering system is pretty robust. As long as you give it a high-quality image with the right aspect ratio and a resolution at least as high as the actual output will be, the OS will downscale very cleanly. My site uses a 158x158 and the icon looks pixel-perfect on the iPhone screen.
Updated list October 2014, iOS8
List for iPhone and iPad with and without retina
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Update 2014 iOS 8:
For iOS 8 and iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
iPhone 6 uses the same 120 x 120 px image as iPhone 4 and 5 the rest is the same as for iOS 7
Update 2013 iOS7:
For iOS 7 the recommended resolutions changed:
for iPhone Retina from 114 x 114 px to 120 x 120 px
for iPad Retina from 144 x 144 px to 152 x 152 px
The other resolution are still the same
57 x 57 px default
76 x 76 px for iPads without retina
You don't have to bother for correct size any more. If you have iTunes artwork file (i.e. file of 1024*1024 size) of your icon, then I have created this application which will provide you all the icons based on information provided here. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.