I'm optimizing my website across most popular devices using media queries in CSS file.
The problem the line below isn't working on iPads:
#media only screen and (min-device-width: 415px) and (max-device-width: 768px) {
even though iPads comes with 768px width the CSS is all messed up. Interestingly, when I use mobile device simulator in dev tools everything looks fine.
Is there some gotchas I should be aware of ?
Have you tried it so it is like this. Leave out device and just put min-width or max-width:
#media (min-width: 415px) and (max-width: 768px) { css here }
Related
I have a confusion.
I have seen in many sites that using max-device-width is deprecated and I need to use max-width instead. So I need to hind a banner when in landscape mode and here is how I did it:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
On dev tool in chrome it works like a charm but when I tests it in real iphone I can not see it working.
So I decided to use the following:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape),
(max-device-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
and it worked.
Now I am confused
if max-device-width is deprecated and shouldnot be used why max-width does not work in this scenario?
Also what is the best solution for what i am trying to do?
**Update
I know there are a lot of answers supporting max-width without device but non of them explain why max-width does not support orientation. So none of them not answers my scenario: I need to use (orientation:landscape) and it seems that when it comes to this property max-width does not handle that
Hi You can simply use only this one:
#media only screen and (max-width : 1280px) {
}
it will work on all devices mobile + tabs + browsers(old, new).
why you need this (orientation:landscape)?
I'm using the below media queries for website. As and when the window is expanded and contracted, it works fine. But for mobile phone, although on chrome dev tool's cell phone simulator, the layout looks perfect. But this same media queries breaks on my actual mobile phone(despite having the same design/layout for both mobile and web). How can I make two different media queries?
#media only screen and (min-width: 10px) and (max-width: 319px) {
}
#media only screen and (min-width: 320px) {
}
#media screen and (min-width: 481px) {
}
#media screen and (min-width: 641px) {
}
#media screen and (min-width: 768px) {
}
#media screen and (min-width: 961px) {
}
edit: iphone 6.
The reason I have so many break pints is because I'm using background image. When window size is made small, the image(with no background repeat) shows blank space at the bottom. To counter that problem, had to go with many breakpoints.
Use max-width instead of min-width. Because i think all your media query represent when the screen resolution bigger than 320 678 etc and due to that only desktop query execute.
I'm trying to fix a responsive design for a website, starting from mobile, to tablet then desktop.
The Mobile works fine (when I inspect by the console, or just by checking in mobile devices- like samsung j7,s5 or iphone 6,7..), also Responsive checks out perfect.
But, the resizing of the desktop screen does not work at all.
If I inspect the Website with Chrom devtools, I see that all the rules are getting over written by the last media query, no matter what is the real size of the screen.
This is my code :
/*Mobile Devices*/
#media (min-device-width:290px) and (max-device-width: 479px){}
/*Desktop Resizing - Small*/
#media (min-width: 290px) and (max-width: 479px) {}
/*Tablet Devices*/
#media (min-device-width:480px) and (max-device-width: 899px){}
/*Desktop Resizing - Medium*/
#media (min-width: 480px) and (max-width: 899px){}
/*Desktop - Large*/
#media only screen and (min-width:900px){}
I'm doing a website that is supposed to work on mobile devices. I have researched about the subject and every website recommends that I use a different media query for each device I intend the website to work on, for example:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* etc... */
However I feel it would be much much simpler to just use one media query for landscape and another for portrait orientation, but I haven't found anyone recommending that.
I imagine you may want to design something more specific for tablet. But speaking only about mobile phones, I can only thing of a reason to have different media queries for each device if you want something CRAZY specific.
Is there any reason for it?
Should I add a media query for each device or is it "safe" to continue with only two media queries?
That's absolutely fine. Don't forget to add the responsive meta tag to every page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then use media queries as you resize your preview window width and height. That'll make the website same as the desktop version.
You can totally pull it off with just one or two media queries. I do it all the time for tablet and then for mobile in fully responsive sites that work on all devices. Those type of fleshed out media queries are for very specific sizes when the developer wants to have a set version of the site for this size and that size.
#media screen and (max-width: 1024px) {
/* Landscape style changes */
}
#media screen and (max-width: 768px) {
/* Portrait to mobile style changes */
}
#media screen and (max-width: 450px) {
/* Maybe one more because that header text doesn't fit anymore on smaller screen */
}
It will be as good the rest of your code, but if you have clean css this should not be a problem.
There is NO problem with it, as far as I see it.
You make your site Responsive for not only the browser window (resizing) but also Adaptive on specific devices. Adding and on those media queries is good too if you see how it behaves (target) on Android phones since your breakpoint basis are iPhone.
You may consider creating another .css file for phone/mobile, the same goes for others (Tablet, TV, etc).
w3schools - media queries
Put all your mobile queries on separate .css. Facebook did the same m.facebook.com.
I am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:
/* portrait phones */
#media only screen and (max-width: 320px) and (orientation:portrait) {
/* Styles */
}
/* landscape phones */
#media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
}
If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.
Try to use:
#media (orientation: portrait) and (max-width: 400px) {Fooobar}
#media (orientation: landscape) and (max-width: 400px) {foobar}
I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed.
/*Portrait phones */
#media (max-width:320px){}
/* Landscape phones and down */
#media (min-width: 321px) and (max-width: 480px) {}