locked
iPhone media query not working RRS feed

  • Question

  • User969992919 posted

    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

    Saturday, July 25, 2015 4:54 PM

Answers

  • User281315223 posted

    Have you tried removing the webkit pixel ratio constraint? This site recommends using a media query that is similar to your existing one with the pixel ratio constraint left out :

    /*iPhone 6 Plus in portrait & landscape */
    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) { /* STYLES GO HERE */}
    /*iPhone 6 Plus in landscape
    @media only screen */
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) { /* STYLES GO HERE */}
    /*iPhone 6 Plus in portrait */
    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : portrait) { /* STYLES GO HERE */ }

    One other consideration is to ensure that your current cache is cleared so that your most recent CSS file is used and to ensure that this query is placed at the end of your CSS (so that no other queries might override it).

    You could also consider using some of the emulators that are available within the Developer Tools (F12) in Google Chrome to simulate the device, which would give you additional information on exactly which styles are being applied to your <h1> elements and where they are originating from.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, July 25, 2015 10:52 PM
  • User281315223 posted

    Previously I mentioned the Developer Tools (F12) within Google Chrome which allows you to easily target a certain device to see when and when a certain style is being applied through the following steps : 

    1. Press F12 to open up the Developer Tools in Google Chrome.
    2. Click the small phone icon that appears in the upper-left corner.
    3. Select the device that you want to emulate (such as an iPhone 6 Plus).
    4. Refresh your browser and you can use the "Inspect Element" (right-click > Inspect Element) within the browser to see which styles are being applied to certain elements.

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

    CSS Media Queries is usually a good place to check, but it appears to already have your existing query that is on there. This same discussion here also lists the same size, so the query that you are using should be working, so I would assume that there is simply another query that is interacting with it.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 26, 2015 10:36 AM
  • User71929859 posted

    It should be working fine. I don't see anything wrong with your CSS. Probably some other CSS styles are overriding it. Try by setting the !important.

    @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 !important;
            font-weight: bold;
            padding: 2% 0;
            margin: 10px 0;
            color: #FF0000 !important;
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 6, 2015 3:51 AM

All replies

  • User281315223 posted

    Have you tried removing the webkit pixel ratio constraint? This site recommends using a media query that is similar to your existing one with the pixel ratio constraint left out :

    /*iPhone 6 Plus in portrait & landscape */
    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) { /* STYLES GO HERE */}
    /*iPhone 6 Plus in landscape
    @media only screen */
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) { /* STYLES GO HERE */}
    /*iPhone 6 Plus in portrait */
    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : portrait) { /* STYLES GO HERE */ }

    One other consideration is to ensure that your current cache is cleared so that your most recent CSS file is used and to ensure that this query is placed at the end of your CSS (so that no other queries might override it).

    You could also consider using some of the emulators that are available within the Developer Tools (F12) in Google Chrome to simulate the device, which would give you additional information on exactly which styles are being applied to your <h1> elements and where they are originating from.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, July 25, 2015 10:52 PM
  • User969992919 posted

    I did try without the -webkit-min-device-pixel-ratio and it didn't work.

    Sunday, July 26, 2015 2:33 AM
  • User969992919 posted

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

    Sunday, July 26, 2015 2:39 AM
  • User281315223 posted

    Previously I mentioned the Developer Tools (F12) within Google Chrome which allows you to easily target a certain device to see when and when a certain style is being applied through the following steps : 

    1. Press F12 to open up the Developer Tools in Google Chrome.
    2. Click the small phone icon that appears in the upper-left corner.
    3. Select the device that you want to emulate (such as an iPhone 6 Plus).
    4. Refresh your browser and you can use the "Inspect Element" (right-click > Inspect Element) within the browser to see which styles are being applied to certain elements.

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

    CSS Media Queries is usually a good place to check, but it appears to already have your existing query that is on there. This same discussion here also lists the same size, so the query that you are using should be working, so I would assume that there is simply another query that is interacting with it.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 26, 2015 10:36 AM
  • User969992919 posted

    Ok let's take iPhone 6 Plus as an example (because it's my phone Cool)

    The following are as per http://cssmediaqueries.com/target

    Device Width is 414

    Device Height is 736

    also the same are as per Google Chrome Developer Tools.

    but when I go to mydevice.io I get the following:

    CSS device-width is 375px+

    CSS device-height is 667px+

    Kindly advise....

    Sunday, July 26, 2015 10:46 AM
  • User71929859 posted

    It should be working fine. I don't see anything wrong with your CSS. Probably some other CSS styles are overriding it. Try by setting the !important.

    @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 !important;
            font-weight: bold;
            padding: 2% 0;
            margin: 10px 0;
            color: #FF0000 !important;
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 6, 2015 3:51 AM