I have been trying to understand how to enhance the button quality of my mobile design. My navigation buttons are currently a png sprite that is 72ppi then I have a copy of these buttons in 326 ppi. I have read that iphone4 can automatically pick up the 326ppi image by adding #x2 to the current navigation sprite? At the moment I'm just a little confused about the process and how my current navigation sprite of 194x343px # 72ppi can change into an image 335x1469px # 326ppi?
If anyone can provide some useful info and guidance that would be great.
Kyle
Based on what I could gather, you can create an override stylesheet targeted towards iPhone 4 using this technique. What you need is a #media query, and you're good to go.
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 4 styles */
}
Or, if you would want to link to an external stylesheet, use:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
If your button's dimensions are 194x343px on a normal display then include a file called button.png of this size in your project and link to it in Interface Builder - then you also want an image with the dimensions 388x686px (double the size) and with a filename of button#2x.png in your project. Your app will automatically use this higher resolution image when running on a retina display.
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 trying to get my responsive website to "respond" when on iphone or ipad for example... my css file is linked here - http://uximag.com/styles.css
All the responsive style is at the bottom of the stylesheet. it works fine while on a desktop but when I go to an iPhone it doesn't work?
Please let me know, I've tried a few methods and cant seem to figure it out.
JimmyRare's comment is a good one. Set your max width to be smaller (640px for iPhone5) and it should apply to your iDevices and your browser when it's shrunk down.
Another option is setting up the code in your HTML document, which isn't ideal in that it combines your HTML writeup with your styling, but it has the added benefit of letting you target the width of the screen's resolution and not the browser width:
<link rel="stylesheet" media="screen and (min-device-width: 640px)" href="640.css" />
there are several html files to guide the user through our app and to introduce him to new features. It is a universal app for iPhone and iPad. If the user selects the help section for the iPhone version, i want to show him images scaled for the iPhone device.
But now there is my problem. In the CSS file there is only one class boximage for all the images. How is it decided which image to load? Should i stuck each image in its own class?
Thanks in advance four your ideas!
Regards,
buk
You can try this.
<style type="text/css">
#media all and (max-width: 800px) {
.boximage{ background:url(image_name1.jpg)}
}
#media all and (min-width: 800px){
.boximage{ background:url(image_name2.jpg)}
}</style>
or Use javascript to find the user-agent and set the image from script.
I want to have a webview that has a single HTML and a single CSS file, shows graphics at the same size, but native resolution for each.
My existing webviews, designed for 320x480 seems to scaled up well (crisp text and border-radius for instance), though images are at half res in the iPhone4 simulator. How do I simulate the native image loading behaviour where a graphic or it's double res version is chosen automatically with HTML, CSS, or JS? (hopefully not JS)
I'm currently using a viewport declaration like so:
<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' />
This zooms out and image pixels are 1:1 with display pixels, but it also scales down everything else. And of course makes it tiny on the smaller iPhone display.
I have a feeling this has something to do with some sort of viewport size media query?
This will load a specific stylesheet for iPhone 4:
<link
rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>
I stumbled on this the other day: http://aralbalkan.com/3331
This will load an iPhone 4 stylesheet
<link
rel="stylesheet"
type="text/css"
href="/css/retina.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>
Then in your low res stylesheet the magic move is to set your background size property to the size of the low res image.
.demoImage
{
background-image: url(../images/my-image-64.png);
background-size: 64px 64px;
background-repeat: no-repeat;
}
Now in retina.css simply show the double res version
.demoImage
{
background-image: url(../images/my-image-128.png);
}
Now the css background image will display a 128x128 image as if it was 64 css pixels providing a 1:1 image pixel to display pixel image display on an iPhone 4.
I'm having the same problem. I haven't got the time to work on it, but my idea is to create graphics with a higher pixels per inch and use those for both iphone 3g(s) and iphone 4.
Not sure if that's going to work tho. But worth a shot.
A CSS media query should work:
#media only screen and (min-resolution: 300dpi) { ... }
Also, A List Apart offers a technique to consider for serving high-res images. The article is mainly about print styles, but applies here just as well.
Just wondering if anyone else has experienced the iPad/iPhone scaling their background images down to fit the view port.
In my case, I'm swapping out background images via javascript, and the new background images are super wide to fit large displays. However, the iPad is scaling down the background images that are added to the DOM via javascript. I solved this by using "-webkit-background-size" set to the size that the image should be, but this causes the background image to be stretched and pixelated.
This worked for on iPad:
-webkit-background-size: length_x length_y;
The iphoneOS scales every picture with above 2 million pixels (width*height) 50% down.
I managed it with spliting the background into two pictures.
All you have to do is add this meta tag within the of your pages to prevent the background image from being scaled.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
First of all, if you export your image as a 32 bit png (I use Fireworks to do so), and use that png in your background instead of a jpg file, IOS won't scale the image. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)
Also, aditionally for a better experience in ipad / iphone, you should:
a) set a min with do the body tag (mine is usually 980px)
body {
min-width: 980px;
}
b) set the same width to the viewport meta tag
<meta name="viewport" content="width=980px">
Users should now be able to:
- see the design as you have created it
- zoom the content (wich they couldn't if you used "initial-scale=1, maximum-scale=1" on the viewport meta tag)
- change the device landscape to portrait and vice versa with no issues