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
Related
I'm having some issues with a page that doesn't have a lot of content and therefore has a small height. The iPhone is scaling the page, and due to this, I can't see the full menu bar (960px wide). I put a minimum height using a media query for both portrait mode and mobile devices with a minimum resolution. I really dislike doing this as I don't know how this will work on other devices, and it only works if the user doesn't rotate the screen (after rotation, the original issue re-occurs).
Is there some way to force the iphone to show a minimum width of 960px even if the height of the content doesn't fill the screen?
You can control the viewport width, and maximum scale (depth visitor is allowed to zoom in) for Apple mobile devices with this META tag:
<meta name="viewport" content="width=960px, maximum-scale=1.0" />
Works with Android and other mobile browsing devices, too.
By default iOS browsers supply a set of default screen dimensions, regardless of actual screen res or orientation.
In order to get them to supply #media tags with the actual screen dimensions there is a Meta tag they will obey:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you add this to your page(s) then your #media commands should work with the actual screen resolution of each device. You then have full control with your #media queries
You can then use things like width: 100% to use the actual screen width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have a webpage which I have created a media query for a resolution of 480px in width.
The iphone 4 correctly picks up this version but for some reason it overhangs the page its not using the actual resolution of the iphone 4 which is 640px in width its using a width of 320px. (i read somewhere that it does this for backward compatibility with apps developed for iphone 3)
Is there a way using a viewport or a media query to correct this? Or does someone have an example of how to implement an iphone media query, ive tried this with no luck.
Is there a way to stretch the 480px media query to fit the iphone?
This is my current viewport:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5;" />
Media query - this does nothing and ive tried with just -webkit-device-pixel-ratio: 2 only
#media screen and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {}
This media query in css3 should detect any iphone or ipod
#media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)
The way I understand it is that retina screens will still act as if they are the normal old screens. you act as if things are still 320px is the width. if you want something to take up the full width of an iphone in portrait then you would use 320px not 640px. Really you should be using percentages and ems though not exact px sizes.
Not sure if this answered anything, but I think you were wanting to know why if you set something to 640px it would hang off the edge and not just take up the width of the retina screen.
This must have been answered before, but I can't find a related question.
I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide.
Want I want is the iPhone4 (640 x 960) when in portrait mode (640 wide) to adhere to media queries as if it's display-width = 320 pixels instead. Rationale: even though the iphone has more pixels, I do want to display a simplified layout to those user, similar to users of non high-density phones.
Any way to do this, by specifying some meta-tag for these high-pixel density phones for example?
Of course, I could define separate media-queries for iphone 4 and the like with min-device-pixel-ratio: 2 but this leads to separate css media queries (one for low and one for high pixel density) which essentially have the same logic, which doesn't seem very DRY to me( http://en.wikipedia.org/wiki/Don%27t_repeat_yourself )
Strange thing is: the new Ipad 3 , with pixel density 2, DOES correctly render the way I want, i.e: it mimics (at least as css media queries are concerned) a device with half the resolution.
The iPhone 4 (and 4S) will respond to this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It's the "initial-scale" part that you're after. It will make the high res device act like it's 320px wide (or 480 in landscape).
There are other bugs around landscape orientation that you should be aware of.
Also, keep in mind that there is an orientation parameter available to media queries:
#media screen and (orientation:landscape) {
/* Landscape styles */
}
First: I think there's a typo in your question -- on a 640x960 display, 640 wide is portait mode, not landscape. Portrait is vertical, landscape is horizontal.
That said, if I'm reading your question right, you're asking how to target a retina display iphone using media queries for width.
The answer is that you can't -- both the retina display iphone and the non-retina display report themselves to the browser as 320x240. The difference, as you noted, is that the retina display has 2x pixel density, which you can target with media queries:
.avatar {
display: block;
width: 50px;
height: 50px;
background: url("50x50-avatar.png");
}
#media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.avatar {
background: url("100x100-avatar.png");
background-size: 50px 50px;
}
}
This example is for displaying high-resolution images on retina displays, but you can use the same techniques for tweaking layout for retina displays.
So, in a nutshell, write your styles for the non-retina displays first, and then add retina display overrides using media queries, which should avoid your DRY concerns.
Further reading:
Retina iPad Specific CSS
Safari Developer Library: Configuring the Viewport
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 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.