I have four different sets of CSS styles for the following screen sizes:
(1) #media only screen and (max-width: 566px) {
(2) #media only screen and (min-width: 567px) and (max-width: 767px) {
(3) #media only screen and (min-width: 768px) and (max-width: 999px) {
(4) #media only screen and (min-width: 1000px) {
When I resize the browser window on my desktop PC, everything works as expected. However, on smartphones (tested on Motorola Moto X 2, Samsung Galaxy Mini S4, iPhone 4s), always Media Query (3) is triggered (in both portrait and landscape view) instead of (1), despite the following parameters of my Motorola Moto X 2:
Only when I change (1) to
(1) #media only screen and (max-width: 980px) {
(1) is triggered. But this would then also cover (2) and (3), so e.g. on the iPad, (1) would trigger instead of (3). Any ideas please?
Thanks!
EDIT:
In the internal browser of Android App "barcoo" the media queries work as expected, but not e.g. in mobile Chrome or mobile Firefox...
Thanks to CodeRomeos' hint, I could fix the issue like so:
Instead of
#media only screen and (max-width: 566px) {...}
I used:
#media only screen and (max-device-width: 566px) {...}
Hope this helps you, too!
Related
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 am trying to design for 3 different views, iphone, tablet and desktop.
This is my media query.
#media only screen and (min-width: 320px) {
**mobile/iphone style**
}
#media only screen and (min-width: 768px) {
**tablet style**
}
#media only screen and (min-width: 992px) {
** desktop/bigger screens **
}
So I started with mobile view and everything is fine. Then I am now styling tablet and everything I did on mobile view is being carried over in my tablet view. For example, I set padding somewhere in mobile view and the padding is screwing with my tablet view. I am not sure what I am doing wrong. I might have more problems later on when I start working on the desktop view. Is this the proper way of making media query?
This #media only screen and (min-width: 320px) will target all screen with min-width:320px. One way you can alter the MQ is by having this
#media only screen and (max-width: 767px) {
**mobile/iphone style**
}
In the above MQ style will be taken on those devices below tablet screen size .
Fore more you can find here Media Queries: How to target desktop, tablet and mobile?
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'm looking for a list of generic CSS media queries to match phone (both portrait and landscape), tablet (both portrait and landscape) and desktop.
I have found many posts with some generic media queries, but they are often different and maybe I don't understand them.
For instance, the following query:
#media only screen and (max-width: 768px) { }
does it match all phones (portrait and landscape) and tablet portrait? Or what?
I also found other examples, like the following:
/* mobile */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* tablet */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
and
/* mobile */
#media screen and (max-width:767px) { }
/* tablet */
#media screen and (max-width:1024px) { }
Which of the previous queries are correct to correctly match phone (both portrait and landscape) and tablet (both portrait and landscape)?
Thanks
Best way to use media queries, like Marcos said is to use resolutions. Your first code #media only screen and (max-width: 768px) { } will target all the devices that have maximal screen resolution of 768px. So if your phone have a resolution of 640px it will affect it, if your phone have a bigger resolution of 768px the code you enter in {} will be ignored. Usually this is used to make responsive designs, and you use queries with different resolutions for different devices (you can easily find online the most common queries).
Hope it helps.