I was trying to target the iphone 5 with my media queries and the background in landscape does not show up. Since I do not have any special graphics for retina displays i wanted to find out if i can use the same graphic for all with the media querys. How do i target iPhone 5 Landscape orientation?
#media only screen and (max-width: 480px)
and (orientation : landscape)
{
#homepage{
background: url('images/480x320_Horizontal.jpg') no-repeat fixed #00314d;
}
}
Use meta tag to force iPhone to render viewport as device width..
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
And now use media query for setting styles for landscape mode, for iphone which is >320px;
#media screen and (min-width: 321px){
/*Style goes here*/
}
Related
I'm a little confused about targeting iPhones devices (in this case 4/S).
I've read that no matter the orientation, the Apple phone will always return the DEVICE-WIDTH value in PORTRAIT (meaning 320px for iPhone 4).
Said this, if the device it's always returning a 320px, why almost all media queries I looked online for this devide take into account the 480px (if this value is not supposed to be returned)?
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* your CSS here */
}
Thanks in advance
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 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 trying to target mobile devices (specifically the iPad and iPhone) but using CSS3 media queries the same styling is added to other devices with the same resolution, such as laptops. How can I add mobile device specific styling without adding it to other non-mobile devices too?
So far I'm using this, which adds the css to all devices that are 1024px wide and under, even with the orientation selector:
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 1024px) and (orientation:landscape){
// Do something
}
EDIT:
For anyone interested, I got this to work just by duplicating the media query but altering the duplicate slightly. It's by far the most efficient way of doing it but the main thing is it works:
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 1024px) and (orientation:landscape){
// some styling
}
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 768px) and (orientation:portrait){
// some styling
}
Maybe a look at this, at the section "7.3 Recognized media types", will help you.
Yup: desktop browsers support the orientation media query too.
I don’t think media queries provide a way to detect whether a device is the iPad or the iPhone. They allow you to inspect features of the device (like its width and orientation), rather than identify the device.
What makes your styles inappropriate for non-iPad devices?
I found that all you need is the second media query in your edit:
#media only screen and (min-device-width: 320px) and (orientation: portrait),
(max-device-width: 768px) and (orientation: portrait) {
// some styling
}
It worked like a charm!
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… :-(