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.
Related
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 am using Cordova to make a hybrid app.
I have the following media queries in my css file
#media only screen and (min-device-width : 320px) and (orientation: portrait) {
/*css goes here*/
}
#media only screen and (min-device-width : 320px) and (orientation: landscape) {
/*css goes here*/
}
and similarly media queries for all sorts of device width in both portrait and landscape orientation.
When I test my app on Nexus 4, it doesn't detect the orientation change and change the css, example, if I start the app in portrait mode, then based on the device width it picks up the media query of that width in the portrait mode, however if then I change the orientation of the phone, it doesn't detect the new width and apply the new css of the corresponding width and landscape orientation and vice versa.
Am I missing something here, isn't CSS Media query supposed to detect the change in orientation by itself and apply the appropriate CSS?
I also had an issue with this, where I would have a specific media query for portrait landscape and another for landscape, and it would switch fine from portrait to landscape the first time, but when you went back it wasn't updating.
#rockStar should get the credit for the answer, but using min-width instead of min-device-width did the trick for me as well.
Sorry i have been busy with my studies lately so i couldn't check stuff around here this days, Upon request,
using min-width is better than using min-device-width
and the reason would be in here.
Try using a CSS selector based on portrait and landscape mode, i.e you can use a class in landscape mode and apply css and remove the class when in portrait mode and apply css. So basically you can check whether a class exists or not.
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.
I am using the following media query for my site
#media (max-width: 976px) {}
I am finding that when i view my site
http://46.32.253.11/
on the ipad 3 in landscape mode the navbar button that appears in portrait mode doesn't work and my navbar is split over 2 lines.
Do i need to add another media query, or can i edit the existing one. If so what changes would i need to make.
Im really new to media queries so if anyone has an excellent resource they would like to share that would be great
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape and portrait listed below:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.
I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.
So the div will expand when in landscape mode and shrink up a bit in portrait.
Any ideas?
Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).
I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.
With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles here */
}
Check out this example page for more explanation, or this one.
EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.
Quote from w3.org about the ‘orientation’ media feature:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A note/quote from developer.mozilla.org about the "orientation" feature:
Note: This value (ie portrait or landscape) does not correspond to actual device orientation.
Opening the soft keyboard on most devices in portrait orientation will
cause the viewport to become wider than it is tall, thereby causing
the browser to use landscape styles instead of portrait.
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
JSFIDDLE DEMO (try resizing the view port)
Here are the representative media queries affecting portrait and landscape orientation.
#media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}