iPhone media query not working

[jrahma]

Hi,

I am using below css for iPhone 6 Plus but it's not working when I browse from my iPhone 6 Plus..

when I say not working I mean the h1 font size and color is not changing.

what's wrong please..

/* iPhone 6 Plus Portrait */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3)
{
	h1
	{
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: small;
		font-weight: bold;
		padding: 2% 0;
		margin: 10px 0;
		color: #FF0000;
	}
}

/* iPhone 6 Plus Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3)
{
	h1
	{
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: small;
		font-weight: bold;
		padding: 2% 0;
		margin: 10px 0;
		color: #FF0000;
	}
}

Thanks,
Jassim

[sneakyimp]

What do you mean 'not working?' Also, I fail to see how you expect h1 to change size when both h1 directives in your CSS are completely identical.

[Bonesnap]

As mentioned, your styles are identical in your different media queries. But as an aside, it's considered a best practice to set non-changing attributes in a "master" style. Things like the font itself. I would think the colour wouldn't change, but it appears you want it to. In any case, you shouldn't be copying all the attributes from media query to media query and only changing the individual attribute/value that you want to change. Think how bloated your stylesheet is going to be, not to mention how difficult it will be in the future when you end up needing to change something.

[jrahma]

is there any tool to check what min-device i should set for iPhone? similarly for other devices?

[Weedpacket]

jrahma;11049561 wrote:

is there any tool to check what min-device i should set for iPhone? similarly for other devices?

You can look at the documentation for the devices to see what resolution they support (or, say, do a web search for pages like https://www.apple.com/iphone/compare/ and http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions and no doubt others for other manufacturers, like Samsung or Microsoft, or ... another search finds http://cartoonized.net/cellphone-screen-resolution.php which offers a few dozen, though not all models listed are smartphones given the site's purpose).

For something that can display at various resolutions (though this isn't the same as fully simulating the device) - well, I know Firefox at least has a "Responsive Design View" facility built in.

[jrahma]

Thanks for the links...

FOr iPhone 6 Plus as an example, it says the screen is:

5.5"
1920-by-1080-pixel resolution at 401 ppi

so how can I convert that into:

@media only screen 
    and (min-device-width : ----px) 
    and (max-device-width : ----px) 
    and (orientation : portrait [OR LANDSCAPE]) 
    and (-webkit-min-device-pixel-ratio : -----)

[cluelessPHP]

Not sure if this will be of any use to you

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){



}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px){




}
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
 @media screen and (min-device-width: 768px) and (max-device-width: 1024px){




}
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){


}

/* #### Desktops #### */
@media screen and (min-width: 1024px){



}

[cluelessPHP]

Oh also as Bonesnap said, set you main styles globally, only overwrite your widths ect. within the media quires, no need to write the background colour for each device format