I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
Related
I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?
#media screen and (max-width: 1024px) { }
Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.
So for it's screen with physical resolution 1125px your media will be
#media screen and (max-width: 375px) { }
Very good table with devises resolutions, ratios and CSS scale here:
https://www.mydevice.io/#compare-devices
Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this
/* iPhone X in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}
More about it here http://stephen.io/mediaqueries/
I am working on a side project and using Bourbon Neat as my grid. I have a few media queries targeting specific mobile devices such as iPhone 5, iPhone 6, and iPhone 6 Plus. My question is am I able to target a specific device, without carrying the styles over to another device? For example, I have a media queries set up for iPhone 6 and iPhone 6+. Here is what my media queries look like...
/* iPhone 6+ in portrait & landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* STYLES GO HERE */
}
/* iPhone 6+ in landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6+ in portrait */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* STYLES GO HERE */
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 6 in portrait */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* STYLES GO HERE */
}
What I am ruining into is some changes I make in the iPhone 6 landscape media query seem to get applied to iPhone 6 Plus landscape, the iPhone 6 media query changes will override my iPhone 6 Plus changes. Again, am I able to only target a specific device without those changes being applied to other devices with similar pixel width? Any and all help or feedback is much appreciated. Thank you.
Again, am I able to only target a specific device without those
changes being applied to other devices with similar pixel width?
To answer your specific question, you cannot target by device via CSS other than by using widths, heights, etc.. but that's not really targeting the browser. So the answer is no. This requires knowing more than just what the width, height, or orientation of the browser is. And even if you could, I'm not sure you'd want to as it's not a very clean solution IMO.
If you absolutely must target by device you'll need to use server or browser side code. Here are some non-CSS solutions if you'd like to look into them:
1) You can use javascript:
http://hgoebl.github.io/mobile-detect.js/
2) Or you can use a server side library like:
http://mobiledetect.net/
But a better solution would be to structure the CSS to make sure that the styles are not overriding each other.
You can find out the device resolutions you are trying trying to target and be more specific in your media queries. For example, to target an ipad in portrait mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait)" {
/* styles */
}
Or for an ipad in landscape mode:
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
/* styles */
}
However, with this technique there is no guarantee you won't end up apply the styles to another device with the same resolution. The safest way to target a device is using javascript and some OS/device sniffing.
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.
I have the following media query:
#media screen and (max-width: 480px) {
When viewing the website in portrait mode on my Nexus 5, it looks the way I want. However, when I turn the phone over to landscape mode, it shows the full site and not what is specified within this media query.
Why is this happening? I've also tried:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
This did not resolve the issue.
Actually Nexus 5 Landscape width is 590px and you have given the max-width:480px....
See the view-port sizes
You can give the media queries like this also :-
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}
it should work for you... try with this
The nexus 5's effective screen dimensions are 360x598 so in landscape the viewport is wider than the highest end of your media query. You can capture the landscape orientation of the nexus 5 by increasing your max-width to 599px.
#media screen and (max-width: 599px) { ... }
reference
here i done code for style.css for mobile device it the code works for mobile portrait size and when i rotate to landscape it call default css how to solve this issue
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
another terms are
#media (min-width: 481px) {}
this for all sizes like tablet,pc ..
for this i checked in web developer tool in google crome
The problem is when you rotate the device, it is screen is bigger than 480 px
#media screen and (orientation:portrait) {
...Some Css Code
}
#media screen and (orientation:landscape) {
...Some Css Code
}
This will help you
or
you can find the landscape resolution than you can target media query with that.
For Iphone 5 your media query must be like that
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}