How to target media queries for Samsung tab 8.4 inch.
my code is
#media (device-width: 800px) and (device-height: 1280px)
when first appearance media query is getting affected. once changed the orientation from Portrait to Landscape and again back to Portrait, style is not getting affected.
Device Specification :
http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php
Thanks in advance
I can't test my solution on physical device, but you can play with orientation:
Landscape mode
#media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}
Portrait mode
#media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}
Notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :)
For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
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.
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 */}
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.
I am trying to set the width of an element based on screen width. My code works perfectly on desktops and most mobile devices except the galaxy note 2. I've tried this query but to no avail
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// my css here
}
The galaxy Note II will switching the innerHeight and Screen.height during the rotation. The innerHeight/Width and Screen.Height/Width are listed below
Portrait innerHeight/Screen.Height 615/1280
innerWidth/Screen.Width 360/720
Landscape innerHeight/Screen.Height 335/720
innerWidth/Screen.Width 640/1280
According to this article
http://tripleodeon.com/2011/12/first-understand-your-screen/
the media query min/max-device-height/width is equal to screen.height/width
So for Galaxy Note II, my media query is listed below
/* Galaxy Note2 - Portrait */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {
Code here
}
/* Galaxy Note2 - landscape Due to the Screen Height and Width is changing during orientation changes */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape) {
Code here
}
You could target just that phone with a conditional stylesheet. It's kind of like fixing a dent with a sledgehammer but it will work. You can parse the user agent string and add a stylesheet for just that phone model.