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.
Related
An iPhone 4 with a resolution of 640×960 falls into media queries specified within:
#media only screen and (max-width:480px)
This media query is at the very end of my CSS stylesheet...
Above this query are those working great for iPad (1024) and Desktop, etc...
What am I missing??
I'd like the iPhone4 to respond to media queries specified earlier in the stylesheet, targetted as: (max-width:640px) instead, of course...
For the record, my viewport tag is currently:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You've confused css px and display px. Which is understandable because they're both measured in px. Sigh.
From the point of view of css, a retina display is only 320px wide. However, it's pixel ratio is 2 meaning every 1px in css-land is really 2px on the display.
Taken from here you can use a different selector to identify retina displays :
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
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" />
I'm having trouble wrapping my head around sizing images and ui elements for my iphone app using phonegap (basically mobile website gone native app). Here are my PSD settings:
width: 640px
height: 960px
resolution: 326px
I'm creating two images, one at half resolution and the other at full. Then I'm using a plugin to recognize the retina display and replace all images with "*-2x". The trouble is that the images appear larger on my retina iphone and are blurry. I'm wondering if my viewport is messing things up as it zooms in on the screen to fit the app:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have never used PhoneGap, but to make HTML show images in Retina res what I do is link to a retina res image, say the image is 640x960 pixels, but in the HTML set the size properties to 320x480.
The reason for this, is iOS uses resolution independent "points" instead of "pixels" for layout.
I'm having trouble understanding how the mobile resolution works. From what I know, standard website mobile resolution is 320px width. The problem seems to be with iPhone 4, which seems to have 640px width screen resolution, but yet, it displays web in 320px.
What is the solution here? Do I code 2 different resolutions for 320px and 640px screens? How do I force iPhone 4 to display 640px web?
Well basically, as you've noticed, iPhone 4+ resolution is 640px, but the browser only displays 320px of it, for a number of different reasons. Check this other answer for more details on how this is happening:320px resolution for web apps
That also talks about the fact that you can specify the viewport for a website to force it to be seen in 640px on an iphone, but that you shouldn't do that, but just double the resolution on the image you use.
I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97.Some of the screen resolutions of most popular devices:
"iPhone 320 x 480"
"iPhone 4 320 x 480 (scaled by a factor of 2)"
"HTC Legend 320 x 480"
Either you can use an adaptive layout, like used on this website (try decrease the width of your browser window to see the site adapt). That design is also discussed in this blog post.
Or you create separate layouts for different resolutions all together using media queries.
Because the number of pixels has doubled from iPhone 3 to iPhone 4, it would have meant every website optimized for the iPhone 3 would then be ... tiny on the display.
Hence, a devicePixelRatio was introduced, to retain the size of the websites (in mm or inches) while doubling the physical pixels, efficiently making double resolution (retina) images and fonts much sharper, but retaining old CSS font and pixel sizes.
The devicePixelRatio is 2:1 on iPhone 4 and 5.
That means an image defined in css with 100100px will actually take up 200x200 physical pixels. So you can still css-style the page with 320px total width; 320 dips - device independent pixels.
Note that the devicePixelRatio also exists on Android, where it ranges from 1.5 up to 3.
More information:
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html and
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">
This way CSS will load separately for landscape and protrait.
#media (min-width: 500px) and (max-width: 640px){}
#media (min-width: 320px) and (max-width: 400px){}
This is how the resolution will be handled.
The most common mobile screen sizes are 320x240, 480x320, 800x480, 960x480, 1024x800, and 1024x768.
you use this line of code:
<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />
When it detects your screen to be less than 480px in width, it will use that css. If not, it will use the normal css you used before
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.