How do I target the different iphone4 orientations using media queries?
I have the current setup but im not certain it works.
#media only screen
and (max-device-height: 640px)
and (max-device-width: 960px)
and (min-device-width: 480px)
and (min-device-height: 480px)
and
#media only screen
and (max-device-height: 960px)
and (max-device-width: 640px)
and (min-device-width: 480px)
and (min-device-height: 480px)
I would figure this out myself if i had an Iphone to test on but I don't.
try this different,
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum- scale=0.6667, user-scalable=no">
Related
I've got a devices stylesheet that is loaded to deal with responsive design in a website, but I'm struggling to group a couple different media queries exactly how I want.
I've got a shared set of styles for a small web window, a mobile device at any rotation and an iPad in portrait only.
At the moment I'm getting everything except the iPad with this query:
#media all and (max-device-width: 480px), all and (max-width: 480px)
I'm getting the iPad in portrait with this code:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
How do I combine these two media queries?
Okay, for anyone with this problem.
To achieve this I ended up using the media queries to load the stylesheet, rather than embedding the media query in my stylesheet.
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" />
<link rel="stylesheet" type="text/css" media="#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />
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*/
}
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'm building a responsive design and everything is fine apart from I can't seem to target iPhone 3g users.
I've added the following media queries but the first one (max-width:320px) doesn't seem to work
#media screen and (max-width: 320px) {
// STYLES GO HERE
}
#media screen and (min-width: 321px) and (max-width: 640px) {
//STYLES GO HERE
}
Am I doing something wrong?
Try max-device-width (max-device-width: 320px); I haven't tried it specifically for non-retina display iPhones, but have found it to help when targeting the iPhone 4 specifically.
I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).
I have 5 media queries in total:
//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">
//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">
//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">
//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">
//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">
Everything works on the Desktop, iPad and the iPhone (in both browser and web app versions) but the landscape media query fails on Android's browser? Any ideas? Have I got the 'max-device-width' wrong?
That's because most newer android phones are something like 480 wide by 800 tall depending on device, so the way you have yours written, Android Landscape should be picked up by the tablet landscape css. But I think I ran into a similar issue with Android not picking up the stylesheet, so I added this and everything seemed to work...
<meta name="viewport" content="width=device-width">
Do you have this in your head above your stylesheet links?
On the Droid1 - the viewport size is 320 x 569.