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.
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 */
}
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 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 haven't done any iPhone version yet, so I have this question,
In order to be able to browse the website properly -even if the user turns 90º his phone:
Shall i CSS set with's in px or in % ?
If you are programatically targeting the iOS devices such as the iPhone & iTouch then i would use pixels opposed to percentages, but if you are not targeting such devices and want a one stop mobile website for all (most smart-phones) then i would consider using percentages.
you can specificy min-width max-width and min-device-width and max-device-width in your media queries.
Here is a little more about media queries and the combinations that you can do;
/* Target iPhone Portrait */
#media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
/* Target Android Portrait larger than 320px Width */
#media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
/* Target iPhone Landscape */
#media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
/* Target Android Landscape */
#media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
You can use % with one css class, and the size of components will be adjusted automatically.
You can also use px with two classes, one for portrait, one for landscape :
body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}
Personally I would use %, rather than px...
You will want the page to become 100% which ever way this is rotated, and then shift the content around accordingly.
The New York Times uses %, as you can see where the page is Landscape you are zoomed in further than Portrait.
If you are building a non specific website for iPhones (sub-domaine like iphone.mywebsite.com) I would suggest using CSS Media Queries as suggested by Xavier. It allows you to do much more than specify a min-width and max-width!
You can specify the type of device (but many devices aren't recognized like they should…) like: screen handheld print tv and many other
But most importantly you can also set if the browser window is in portait or landscape, it's resolution or aspect-ratio and so on…
As for % or px I'd definitely go for px, it's very difficult to have something working as you would wish using %. Because you don't necessarily want the same kind of information if your user comes with an iPhone or with an other device.
For exemple you could take out all the heavy images from your website for iPhone users because they'll probably be using a 3G connection and so making your site a lot faster to load!
A really nice example of what you can do with CSS Media Queries… unfortunately it0s not my work… :-(
I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.
I have established that the best method is to use #media from the CSS3 spec.
As such these are my media queries at the minute:
#media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
#media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
#media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
#media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,
Therefore making my question;
How do I create an #media rule that points both the iPhone 4, 3GS and other mobiles to the same styles?
Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:
#media only screen and (max-device-width: 480px) {
/* iPhone CSS rules here */
}
You'll only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.
BoltClock's answer seems pretty good to me at the moment.
However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.
I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.
To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)
#media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone CSS rules here */
}
Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )
I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.
#media only screen
and (device-width:320px)
and (device-height:480px)
and (-webkit-device-pixel-ratio: 1) { ... }
In order to work this query requires that you use Safari's viewport meta tag to fix the browser to 100% with the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.
Lists of phone resolutions
Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html
All information was considered as of post date.
Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS
I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.
Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.