I have the following css:
/* iPhone 4 Landscape */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
/* iPhone 4 Portrait */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: portrait) {
.dropdown-menu{
height: 370px;
}
}
/* iPhone 5 Landscape */
#media only screen
and (max-device-width: 568px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
My problem is that the iPhone 5 condition seems to be taking affect on iPhone 4. I know it's effectively doing the same thing (setting the height to 210px) but is there are reason for this? I'm testing it in chrome's phone emulator.
It seems like it's only seeing the one condition of min-device-width being 320px and using that query as opposed to using all of the conditions together.
Thats because the iphone 4 screen will fullfill both media queries (resolution is lower than max iphone 5 media query) and the iphone 5 is the last one. Being the last one it overrides the iphone 4 media query.
Related
i have make a sence and it works only for ipad-pro (1366*1024) landscape. It dont disturb my 1366*768 device viewport. let me show the code below:
#media only screen
and (min-device-width: 1025px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){selector{
background-size: 100% 75% !important;
background-position: center top 188px!important;
background-repeat:no-repeat;background-attachment: fixed;
}
}
now i need another media query which can work only for 1366*768. i edit the upper one for 1366*768 but it cant work. I think i help you make understand what i actually want: please help somebody!
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
Try this and check.I don't have an iPad Pro but this works for me in the Chrome simulator.
I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.
For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).
You probably mean iPad Pro whose width is 1024px.
You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:
#media screen and (min-width: 1024px) and (min-height: 1320px) {
/* iPad Pro */
}
#media screen and (min-width: 1024px) and (max-height: 1310px) {
/* Laptop */
}
If the width of the screens are the same size, CSS can't distinguish them from each other I guess.
You can use JavaScript. The platform property, from the navigator object, returns a string with the platform the browser is used on. (i.e. MacIntel, Win32) (Usage: platform.navigator)
For disabling and enabling stylesheet this might work for you: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/
for ipad specific media queries use below code,
if u want to hide img in ipad at 1024px width i.e. landscape mode u can use class "hide-me-landscape"
if u want to hide img in ipad with landscape and portrait mode use class "hide-me"
if u want to hide img in portrait mode use class "hide-me-portrait"
see below code for ex
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me{
display: none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-portrait{
display: none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-landscape{
display: none;
}
}
you can learn more about it here
you can also use modernizr to detect whether user is using touch screen device or not and apply your css accordingly
hope it helps :)
I'm making this website & I made the media settings for mobile, tablet, laptop, desktop. It looked good in all other phones. I havent' checked yet on actual tablet, but its fine on the chrome browser emulator.
However, my friend checked out the site in his Iphone6 Plus and the navbar settings were messed up. Btw, I'm using Bootstrap 3 for the framework.
I'm confused why my code is working on other phones but not on Iphone6 Plus.
Maybe even Iphone6 have the same problem?
Here is my media css:
/* Tablet (Portrait) */
#media only screen and (max-width : 768px) and (orientation: portrait) {
}
/* Phones (Portrait) */
#media only screen and (max-width : 480px) and (orientation: portrait) {
}
/* Phones (Landscape) */
#media only screen and (max-width : 480px) and (orientation: landscape){
}
/* Tablet (Landscape)*/
#media only screen and (max-width :1100px) and (orientation: landscape) {
}
/* Medium Devices, Desktops and tablet landscape*/
#media only screen and (min-width : 992px) {
}
/* Large Screens, Large Desktops */
#media only screen and (min-width : 1601px) {
}
I already checked online that the pixel density & resolution is quite different for Iphone6 Plus. We've tried the solution from here : iPhone 6 and 6 Plus Media Queries
So far, even those queries didn't fix our problem. It seems like there were no changes. I hope this problem could be resolved quickly, I appreciate your help.
Everything comes down to device-pixel-ratio which used to be 2x for iphones. New iphone 6 plus has 3x retina display
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Your CSS */
}
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
/* Your CSS */
}
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{
/* Your CSS */
}
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{
/* Your CSS */
}
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{
/* Your CSS */
}
Further more, an article from CSS | MDN to add more browsers support and a fallback.
link : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
#media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
A list of devices with their respective device-pixel-ratio.
link : https://bjango.com/articles/min-device-pixel-ratio/
I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)?
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width: 1200px) and (max-width: 1823px) {}
#media only screen and (min-width: 992px) and (max-width: 1199px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (max-width: 767px) {}
#media only screen and (max-width: 480px) {}
#media only screen and ( orientation: portrait ) {}
#media only screen and ( orientation: landscape) {}
I think thats what you are looking for.
Edit:
I think by fit in to my css you mean this:
#media (max-width: whatever) and (orientation: landscape) {}
If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.
max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.
We have to add orientation: portrait and orientation: landscape to your media screen.
iPad Landscape and Portrait
/* iPad Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* ur CSS */
}
/* iPad Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
For latest iPads use pixel ratio:2 (Retina display) .
-webkit-min-device-pixel-ratio: 2
Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.
I've been trying to understand how to override bootstrap media queries for a little while now and I still do not understand how to disable certain media queries (do I have to manually override every element?).
My media queries are as follow:
/* anything > ipad */
#media only screen and (min-width: 972px) {
.container {
width: 960px;
}
}
/* iPhone portrait */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
}
/* iPad portrait */
#media only screen and (max-device-width: 640px) and (orientation: portrait) {
}
I want my site to have a 960px container on iPad + Desktop, and to load a full screen image on anything less than an iPhone. If the tablet or device is say a max width of 700px, they will get a 960px wide site with a horizontal scroll bar. I'm unsure how to this with bootstrap 3, I'm not using it with LESS.