Why isnt the following media query being picked up on iPads in landscape mode?
#media all and (min-device-width: 1000px) {
css here
}
Or
#media all and (min-width: 1000px) {
css here
}
I want this css to target any browser which is 1000px wide or over, not just ipads. For this reason id rather work with the 2nd option of min-width not min-device-width if possible. Both versions work fine with firefox on my PC.
Thanks
The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
#media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
iPad
Portrait - green text - black background
Landscape - white text - red background
iPhone
Portrait - green text - black background
Landscape - green text - black background
Computer (resolution)
1680x1050 - white text - red background
800x600 - green text - black background
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content
From http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
/* iPad [portrait + landscape] */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
It looks like the screen attribute may be required.
If found this works great for the new iPad
#media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
For the record, I'm not sure why
#media (min-width: 1000px) {
/* css here */
}
didn't work for you. Possibly something changed with the iPad since this question was first posted?
Here's a working example:
live view: http://fiddle.jshell.net/panchroma/Bn4ah/show/
edit view: http://fiddle.jshell.net/panchroma/Bn4ah/
Also be sure to include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your page.
I was trying to use a simple media query like this:
#media only screen and (min-width : 768px)
{css here}
but I wouldn't trigger on an iPad pro 10.5' I was testing on, I increase it to 900px (for portrait) and it worked just fine, I think because of the retina display you need to compensate, it may work fine on old iPads non-retina.
Trying to write a media query for tablet, I actually encountered the problem of the iPad underreporting its dimensions. When I tried to use #media screen and ( min-width: 768px ), my styles were being applied to other tablet devices, but ignored by the iPad. I started playing around with the Responsive device model in developer tools, and I stumbled onto the solution. For some reason, my styles would apply when I sized the screen down to 760px. So, I edited the media query to read #media screen and ( min-width: 760px ) and everything started working as expected.
Related
I made a website which needs to look in an exactly same way on all the screens.
I designed it with width = 320 and auto height.
<meta name="viewport" content="width=320">
Now no matter what size of the screen the website scales nicely to fit the screen. It's important for me that the website SCALES and not RESIZES so I cannot use in this case this code:
<meta name="viewport" content="width=device-width">
But while it works fine on various phone emulators and a few different smartphones it doesn't scale on iPhone 6. It just shows the whole website in the top,left corner with black bars on the right and bottom.
How can I force iPhone 6 to zoom the page so this 320px is zoomed to match iPhone's screen width?
using viewport may not be the best option for your case.
I think it could be better if you use css #media because you need to have width = 100%
for example
#media screen and (max-width: 320px) {
div {
width: 100%;
padding: 5px 10px;
}}
so no matter if user uses iphone 6 or iphone 4, the screen will be perfect.
I'm working on a responsive site and I want to make the site react to the browser being made less than 1024px wide, and use those same styles for the iPad in Portrait.
However, if I apply a media query for styles when the browser is less than 1024 px like this
#media only screen and (max-width : 1024px) { /* styles */ }
They affect the iPad in Landscape which I don't want - how can I exclude the landscape iPad but include the Portrait iPad ?
Try this:
#media only screen and (max-width : 768px) { /* styles */ }
iPad's width in portrait is 768px.
I'm currently try to create proper #media queries to target 3 different device groups: phones, tablets and desktops
I use the following mixin in SASS to get it done:
#mixin respond-to($media) {
#if $media == phones {
#media only screen and (max-width: 320px) { #content; }
}
#else if $media == tablets {
#media only screen and (min-width: 321px) and (max-width: 979px) { #content; }
}
#else if $media == desktops {
#media only screen and (min-width: 980px) { #content; }
}
}
This actually works pretty well for most devices i have around.
BUT i have an iPad 2 here and tried the site with Safari and the following happens:
in portrait mode everything is fine. it will be handled by the "tablet" group as it should be.
in landscape mode (when it has 1024px width to work with) it will still fall into the tablet group. But it shouldnt as my layout works perfectly on screens wider than 980px.
As i found out the iOS devices always report their screen size as they were in portrait mode (actually a stupid idea) which in my case is 768x1024. With the media queries above it will never end up in the non-tablet section when its in landscape.
is there a way to exclude the ipad 2 in landscape mode from the tablet query WITHOUT disturbing other devices (like androids which behave correctly)?
Otherwise i have to target every device seperatly with their own strict media query which i want to avoid.
I bet the problem is due to your viewport meta tag. The following is what I use on all responsive sites:
<meta name="viewport" content="width=device-width, initial-scale=1">
#Phill Pafford gave the solution for my oposite problem: jquery mobile default font size using the meta viewport solution. But, this is great for up-sizing the viewport to adapt to a phone screen.
I'm implementing jQM framework only to give a mobile look-n-fell on a "regular" Web-based App that runs on computer screens. And the font looks very big on them! How can I globally down-size the font-size or adapt it (responsive design) to be more appealing (i.e. smaller) on a computer screen?
Thanks!
In your custom stylesheet, not the JQM stylesheet, group your styles with media queries:
/* Large desktop */
#media (min-width: 1200px) { font-size: 12px; }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Am trying to juggle a pair of "then" and "now" JPEG images on an iPad running Safari. In my BODY declaration I catch onload and onresize and call JavaScript which looks at window.innerWidth and window.innerHeight. Problem is, Safari appears to report accurate information for landscape orientation of iPad but not for portrait. For landscape, Safari reports inner 981x644 and outer 1024x673. But for portrait, Safari reports inner 980x1185 and outer 768x929. My JavaScript looks at whether the orientation is landscape or portrait and then resizes the pair of JPEGs for side-by-side or top-and-bottom, respectively. But that doesn't work well when Safari is lying about the dimensions. Can anyone explain what is happening here? Thanks.
I cannot explain why it does so (it's driving me crazy as well)
But I can offer a solution to your problem: do it with CSS instead of JS!
You can do it using media queries to build a different layout for portrain and landscape:
#media all and (orientation: portrait) {
...
}
#media all and (orientation: landscape) {
...
}
and using CSS3 to auto-size the images while keeping their aspect ratio:
background-position: center;
background-repeat: no-repeat;
background-size: contain;
Here is a JSFiddle with all the required code: http://jsfiddle.net/BULxm/
Hele is a direct link to the results, for testing on an iPad: http://fiddle.jshell.net/BULxm/show/