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 */
}
Related
First, I apologize for the enormous pictures.
I'm new to media queries. Here's how my site looks when I test in my browser and set the window width to 320px:
That is how I want my site to appear on mobile phones. But when I load it on my iPhone, it appears like this:
Here is the query I am using:
#media only screen and (min-device-width : 320px)
and (max-device-width : 480px),
screen and (max-width : 850px) {
Obviously, this is because the width of the iphone is much greater than 320px. How do I make my site look like the first image, when the device has the resolution of the second image?
Assuming you are using the iPhone 5. I don't have a lot of experience with this, but based on what I am reading at http://www.stephentgilbert.com/mediaqueries/#iPhone, I would try changing max-device-width to 568px. I believe it is also retina, so you might also need and (-webkit-min-device-pixel-ratio: 2) in there as well.
Looks to me like it might be a viewport issue?
Try putting:
<meta name="viewport" content="width=device-width, initial-scale=1">
into the head of your html.
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.
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'm creating a simple mobile website to render specifically on iPhone. I have been researching the viewport setup in order to have the site fixed at 100% So far I have found that the dimensions are
Portrait: 320px
Landscape: 480px
To render the page at full zoom I have used the following meta tag in the html
<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />
This works great in portrait, however when the iPhone is rotated to landscape mode the page is not resized accordingly, instead appearing zoomed in.
Can anyone advise on how to correct this behaviour?
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Let's assume your website is wrapped in a container called #wrapper.
We can set the width to 100%, and only allow it a maximum value of 480px. Like so:
#wrapper {
width: 100%;
max-width: 480px;
}
You can also listen to the event that fires when the iPhone's orientation changes, i.e. when you flip the phone.
In HTML
<body onorientationchange="someFunction()">
OR In Javascript
window.onorientationchange = someFunction;
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.