Hi I'm trying to write a media query that will affect all phones but not iPads.
I'm having a hard time doing so because apparently android devices change their device-width as they change orientation. Portrait to Landscape means the width becomes the height and vice versa. Apple devices report their device width as the same value regardless of orientation. The fact that there are android phones with higher resolution than iPads further complicates the issue.
If there is an android phone with a device height of 1280px and iPads have a device height of 1024px, how can I write a media query that will affect all Android phones but not iPads?
You could use this to differentiate an Android device in landscape from an iPad in landscape, but I'm not sure on portrait:
<style>
#media all and (min-device-aspect-ratio:1/1) and (orientation:landscape) {
/*because an iPad doesn't change it's width, it's device aspect ratio will not be greater than 1/1 */
body {background-color:#00FF00;}
}
</style>
Related
I’m starting on a Web App and targeting mobiles and tablets.
My app will consist of a full page display, with no ability to scroll (e.g. all content will need to fit full screen on these devices).
I’ll have four different views:
– Mobile Phone: Portrait
– Mobile Phone: Landscape
– Tablet: Portrait
– Tablet: Landscape
So I thought I need to identify if it’s a mobile or a tablet and get their resolution to be able to calculate the different elements’ sizes.
I also need to figure out if it’s portrait or landscape.
In addition I would like to display either phone or tablet size on a computer (centered on the screen) depending on how large size the web browser is.
Is there anybody who can help me out with some code to accomplish this? Or maybe point me to a framework/github that supports this?
Thanx.
Eirik
You can use media queries and orientation in your css
#media only screen and (min-device-width: /*min width*/) and
(max-device-width: /*max width*/) and (orientation: /*portrait or landscape*/)
{
/* your css */
}
I noticed an odd problem with iPhone6 Plus in Landscape Mode and Bootstrap3 with its media queries. Basically, there's almost enough space on the iPhone6 plus in Landscape Mode to make it act like a tablet iPad in Portrait Mode.
The iPhone6 Plus Landscape Mode has a pixel width of 736px.
The iPad Portrait Mode has a pixel width of 768px.
When trying to do grid styling with Bootstrap3, the col-sm-* works only for 750px and up. So, you can capture the iPad Portrait Mode and make it work well with that class. However, it doesn't work well with iPhone6 Plus Landscape Mode.
How can I override Bootstrap 3 so that col-sm-* CSS class works for 736px and up, fixing both container and container-fluid width and column width? The end goal would be to allow iPhone6 Plus Landscape Mode to act more like the iPad Portrait Mode.
Unless someone can come up with a better answer, what I'm having to do is create a media query just for the iPhone6 Plus in Landscape Mode, and fix issues.
/* iPhone6 Plus Landscape Mode Fixes */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) {
/* FIXES GO HERE */
}
A more desirable answer would be to adjust .container, .container-fluid, and .col-sm-*, perhaps.
I have this media query for my mobile display
#media only screen and (max-width: 760px), only screen and (max-device-width: 760px)
But other phone device works fine whenever when I turn landscape view in mobile. But iphone 6 and Mini iPad won't display when landscape view. What exactly do I need to add to let the device work and display?
Iphone 6 and iPad have an horizontal resolution bigger than 760px so both media queries are false and whatever css rule you have inside will not be applied.
You need a "tablet" rule for the landscape mode e.g. with 1024px or even higher breakpoint
I keep trying and trying, but my media queries are not working for iPhones.
#media only screen and (max-device-width: 667px) {}
It's supposed to support all the iPhones, up to the 6 Plus. Can someone help?
In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries
To support all small devices, under the 667px mark, you can generalize your media query to:
#media only screen and (max-width: 667px) {
...
}
If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is:
width versus device-width
In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.
Source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
I have a set of rules I'd like to apply to all screens smaller than 960px wide.
The obvious was:
#media only screen and (max-width : 959px)
However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.
Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?
Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.
Thanks.
Try using #media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.
I've read that iPad reports its width and height the same regardless of orientation.
This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.
Hope this helps.