I started a Photoshop document with the following set up:
width: 640px
height: 960px
Resolution: 326 pixels/inch
The images are taken directly from that file.
I am using phonegap to build an application. Whenever I test it, it makes my image far too large for the iphone screen. I'm not using a viewport or resizing anything. Please help!
Some of you were asking for my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="iphone.css" type="text/css" />
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</script>
</head>
<body onload="onBodyLoad()">
<div class="wrapper">
<img src="img/iPhone/Welcome.png" class="header" />
</div>
</body>
</html>
Just create images with 640x960 size don't set 326 ppi its not needed. Just go with default.
You don't need to set that resolution... To create iPhone app UI in Photoshop, use these settings:
iPhone 3G/3GS - iPod
Width: 320px
Height: 480px
Resoluzion: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels
iPhone 4
Width: 640px
Height: 960px
Resolution: 72px/inch
Color Method: RGB 8bit
Pixel Ratio: Square Pixels
When you save your bigger images (retina display), remember to name them with the same name of the smaller and add #2x before .png
Even though you're using a "retina" size image, you still need to specify the size (resolution) as 320x480 in your CSS (and config.xml)
If you think about, although there are more pixels packed in, the screen size is still the same. Also, it makes further sense as your image is displaying too big when you set it to the larger, retina, size.
Related
I have 4 icons for my site:
iPhone
iPhone Retina
iPad
iPad Retina
They're all working perfectly apart from iPhone retina (144x144), which is just showing the usual low-rez iphone icon (57x57). Below is my code, please tell me what I'm doing wrong.. All paths/images/sizes are correct.
Thank you.
<link rel="apple-touch-icon-precomposed" href="app/img/touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="app/img/touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="app/img/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="app/img/touch-icon-ipad-retina.png" />
Did you rename 114x114 images picture name with #2x ? imageName#2x etc.
set iPhone retina Image Name touch-icon-iphone#2x.png . that is 144*144.
I have this:
<meta name="viewport" content="width=device-width, user-scalable=no" />
So the user doesn't need to zoom, but I have an image which is 417x47 and it looks too big, I mean the user has to scroll left and right in order to see it.If I remove <meta name="viewport" content="width=device-width, user-scalable=no" /> It looks how I want, but I can't do this since I have a lot of text content, Is there a way to scale down only the images, or what's the size that I will need to resize it.
You can use a media query to set the width of the images to 100%, or a pixel-size you think its right, like so:
#media only screen and (max-device-width: 480px) {
img {
width: 100%;
}
}
I am developing a jquery mobile app and I'm trying to load a splash screen and for the life of me can't work out why its not loading.
Here is my code
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/splash.png">
<title>Dest River</title>
I can link to the images no worries and the touch icon works fine.
Any suggestions?
you just need to have a png file according to the pixel size of you iPhone or iPad and give the name of the File
Default.png it works
Another way other than Default.png is by simply dragging and dropping the PNG files to the following boxes under your target settings. Note that the must be the correct size, 1024x768 for landscape and 768x1024 for portrait.
I am testing a mobile site with 2 iPhones. When I rotate 1 into landscape mode, the text resizes (desired). When I rotate the other into landscape mode, the text does not resize (not desired)
I have tried using the -webkit-text-size-adjust style, but the same behavior occurs
html, body, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
My head tag
<head>
<meta charset="utf-8">
<title>Site</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
Is there some setting that can be changed to always resize text? Should I revisit my meta info for mobile?
Edit:
iPhone1 = iPhone 4 Verizon running iOS 4.2.6
iPhone2 = iPhone 4 AT&T running iOS 4.3.5
Thanks
device-width always refers to width in portrait mode, so width=device-width will scale the viewport in landscape mode. This is a quirk of the iPhone (and I think iPad too). Seems a bit dumb, but this is how apple have done it.
So just use:
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0">
Or better this, which will still allow the user to scale if they want to:
<meta name="viewport" content="initial-scale=1.0">
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.