I have a Samsung S4 and S5 phone. I am trying to get the correct media query to target both phone.
The code I have is:
/*General*/
.divStyle
{
height:20px;
}
/*Samsung S4*/
#media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
//example
color: yellow
}
/*Samsung S5*/
#media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
//example
color: blue
}
I have a css call divStyle that aims to target both S5 and S4. However, on S4, the alignment appears differently from S5. So I tried to use media query to target them separately.
When I run the media query, both S5 and S4 are showing up as blue. But if I comment away the Samsung S5 code, both S5 and S4 show up as yellow. How do I get the correct media query to register for each of them separately?
I have found out that it is not appearing identical on both phone because of the font size (settings>display>font size). The S4 font size was larger which made the alignment different.
Related
I just came across a weird thing and was wondering if this is expected behaviour or indeed some sort of bug.
My intention is to write the following code but I narrowed down the issue (see below).
#media only screen
and (
(-webkit-min-device-pixel-ratio: 1.2), /* or */
(min-resolution: 120dpi)
) { ... }
This code works:
#media only screen
and (-webkit-min-device-pixel-ratio: 1.2) { ... }
adding extra outside parentheses (round brackets), this fails:
#media only screen
and ( (-webkit-min-device-pixel-ratio: 1.2) ) { ... }
The target platform is latest Chrome on Android 5.1, but I'm open to hear comments on other platforms too.
It depends on what behavior you need to approach. Whether you need and or or for those rules
If you want to apply both of rules for media query, you need to use and logical operator
#media only screen and (-webkit-min-device-pixel-ratio: 1.2)
and (min-resolution: 120dpi)
{ ... }
If you want to apply any one of the rules for media query, you need to use comma :
#media only screen and (-webkit-min-device-pixel-ratio: 1.2),
only screen and (min-resolution: 120dpi)
{ ... }
I asked a similar question yesterday, but this one is now more precise to what I need. I have the following media query
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (-webkit-min-device-pixel-ratio : 3){
}
So that media query is for iphone 6 +. I am not trying to do a media query for anything which is not an IPhone 6 +, so I am trying to inverse the above (I have to do it like this - to long to explain). So I am trying
#media not screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (-webkit-min-device-pixel-ratio : 3){
}
But it does not seem to work. Is there any reason for this?
Thanks
I am working on a future proof fluid website and dont agree with the following:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) ,
only screen and ( min--moz-device-pixel-ratio: 2) ,
only screen and ( -o-min-device-pixel-ratio: 2/1) ,
only screen and ( min-device-pixel-ratio: 2) ,
only screen and ( min-resolution: 192dpi) ,
only screen and ( min-resolution: 2dppx) {
}
The world is not only retina or devices with 1, 1.5 or 2 pixel ratio. We will keep on having more numbers in the future. My question is: how do I target all those resolutions and future resolutions?
My problem is I have SVG versions of my PNG (PNG to support older browsers and devices with pixel ratio 1) for high resolution displays with I want to come into effect when the user has "any" high resolution display like the retina. So in order to spare all the tons of media queries and have it all future proof I prefer to write it once only. Like a master media query for all high resolution screens, be it mac retina, iphone, dell, HP, etc, nexus phone, etc.
Also why only min-resolution: 192dpi or 2dppx? I mean what about pixel density 1.5 144dpi ? isnt it better to set the minimum to lets say 100dpi (standard is 96) and everything above the normal will use my SVG. 100dpi, 101, 102......144dpi......192.......300dpi........900dpi.......1000 dpi and so on.
/* 1.25 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}
/* 1.3 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}
/* 1.5 dpr */
#media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}
/* 2 dpr */
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
/* Retina-specific stuff here */
}
Is there any way to focus on those two screens with media queries.
Here's my code for the Q10 but it doesn't work:
#media all and (max-height: 720px) and (max-width: 720px) and (min-resolution: 330dpi) {}
Any thought?
Thanks in advance
For the Q10, I would use this: #media screen and(device-height:720px)and(device-width:720px)
I used to select bb q10 in this way:
#media screen and (device-height: 347px) and (device-width: 347px)
and (-webkit-device-pixel-ratio:2.075)
{
}
Don't ask me why such weird values, works for me with BBOS 10.2.1.3062
Blackberry Q10 has a peculiar display. If you can't get it to look good in the range of your other media queries, try setting your specifications for Q10 at the end of your stylesheet, like:
#media screen and (device-width: 347px){
}
I'm using media queries for my site and it works perfectly from web to mobile.
Now I want to use some styles exclusively Apples Retina MBP's (NOT iPad, iPhone, etc.).
But I can't get it to work, when I change the CSS, it changes only on all devices.
Does anyone know a bulletproof media query only for the Macbook Pros which he tested?
I use this Media queries:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and ( min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and ( min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and ( min-resolution: 2dppx) and (min-device-width: 1025px) {
/* MacBook-Retina-specific stuff here */
}
Source: http://css-tricks.com/snippets/css/retina-display-media-query/
Media queries don't detect user agents/devices; they detect features (such as resolution & orientation). Try using javascript and applying a class to the body, and applying styles from there.
var retina = (window.retina || window.devicePixelRatio > 1);
if (retina) {
$('body').addClass('retina'); // for example
}
Then in your css
body.retina {
// styles
}
body.retina #element {
// styles
}
Source: http://hjzhao.blogspot.co.uk/2012/07/detect-retina-display-using-javascript.html
I would try with
#media screen and (min-height: (yourtargetdevicepixelsheight)px) and (min-width: (yourtargetdevicepixelswidth)px) {
you styles here
}
As it is Apples Retina MBP's I dont think many devices can have both conditions, you could also lock it adding
and (max-height: (yourtargetdevicepixelsheight+1)px ) and the same with 'width'
hope it helps