locked
Convert Device Info to Media Query RRS feed

  • Question

  • User969992919 posted

    Hi,

    I have check the iPhone 6 Plus specifications on apple.com and found the following under the Display section:

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

    I want to know how can re-write this in CSS media query format to be something like this:

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


    Thanks,

    Jassim

    Sunday, July 26, 2015 10:34 AM

Answers

  • User281315223 posted

    The media query that was mentioned in your other thread similar to this should be correct as far as targeting the iPhone 6 Plus. Could you consider posting your entire CSS file as there may be some conflicts that are causing some styles to be applied from another media query and not your specific iPhone 6 Plus.

    One approach you could consider adding would be to throw !important behind each of the styles in your iPhone 6 Plus, which would ensure it gets priority if there are other conflicting styles :

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

    This really shouldn't be necessary though as I can only imagine that there is just a conflicting style within your CSS.

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

    I'm not exactly sure, although I believe that the pixel ratio plays a role as well (i.e. it may be something like pixel ratio * pixels) to get the proper resolution. Although this article provides a rather large breakdown on the iPhone 6 which might answer you question in a bit more detail.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 26, 2015 11:13 AM
  • User281315223 posted

    It looks like the Samsung style is actually being applied when attempting to emulate an iPhone 4 as seen through the Developer Tools in Chrome below :

    The styles would appear "grayed-out" if they were being overridden by another style. Have you consider using Responsive Design within your application as opposed to manually styling each possible device that you want to target? It would likely save you quite a bit of time and effort as it would group various sizes of devices together and allow you to have a single style that looks good across multiple form factors.

    Depending on your requirements, a responsive web application may be a much easier to implement solution as you'll just have to design a single web application that will run on any device (phone, tablet, desktop) that has a web browser and your users will enjoy the same experience (thanks to Responsive Design). This will allow you to retain your existing appearance and change it for smaller resolutions.

    Consider Responsive Design

    Consider using one of the many Responsive Design Frameworks that are out there for your site, such as the Twitter Bootstrap. Responsive design focuses on making your site easily usable and accessible from basically any resolution and devices available.

    These could fairly easily be integrated into a Web Forms or MVC application and would basically be all that you would need to use : 

    If you don't want to dive into that, you would also always consider using percentages (or viewport calculations) to handle this as well.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 27, 2015 10:07 AM

All replies

  • User281315223 posted

    The media query that was mentioned in your other thread similar to this should be correct as far as targeting the iPhone 6 Plus. Could you consider posting your entire CSS file as there may be some conflicts that are causing some styles to be applied from another media query and not your specific iPhone 6 Plus.

    One approach you could consider adding would be to throw !important behind each of the styles in your iPhone 6 Plus, which would ensure it gets priority if there are other conflicting styles :

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

    This really shouldn't be necessary though as I can only imagine that there is just a conflicting style within your CSS.

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

    Thanks Rion.

    Can I ask where did the 414px and 736px come from? I mean if you see the product specification sheet here those two figures are not available? How they were calculated? I am just trying to understand the base of it in order to apply to all other devices.

    Sunday, July 26, 2015 10:50 AM
  • User281315223 posted

    I'm not exactly sure, although I believe that the pixel ratio plays a role as well (i.e. it may be something like pixel ratio * pixels) to get the proper resolution. Although this article provides a rather large breakdown on the iPhone 6 which might answer you question in a bit more detail.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, July 26, 2015 11:13 AM
  • User969992919 posted
    Could you consider posting your entire CSS file as there may be some conflicts that are causing some styles to be applied from another media query and not your specific iPhone 6 Plus.


    My code is here if you view the source:

    http://www.mybluefile.com/

    it's not working with the same width and height for iPhone 6 Plus but it on;y work when I play with the number of width and height! maybe I am doing something wrong here?!

    Sunday, July 26, 2015 11:27 AM
  • User969992919 posted

    I found this link for calculating the CSS width and height from the device resolution. All required is to divide the width by the ratio and the heigh by the ration.

    https://coderwall.com/p/ygcyha/how-to-get-real-mobile-css-resolutions-for-responsive-design

    Sunday, July 26, 2015 12:21 PM
  • User281315223 posted

    After digging around in your Developer Tools (F12), it looks like your <h1> styles are being overridden by your signin.css file (i.e. the <h1> styles in it are overriding those that your media query is attempting to use. This is occurring because CSS gives value to precedence (i.e. the latest CSS declaration has priority), so you might consider reordering your CSS media query references and placing them after any other CSS references that you have (as currently signin.css is at the end).

    Sunday, July 26, 2015 3:17 PM
  • User969992919 posted

    maybe because it's the sign-in page but try this page now:

    http://www.mybluefile.com/rion.php

    The iPhone 6 and 6 Plus is working fine for example, but if you try iPhone 4 and iPhone 5 you'll see the table is larger than the screen even with 80px for the div!

    Sunday, July 26, 2015 3:53 PM
  • User281315223 posted

    It looks like the Samsung style is actually being applied when attempting to emulate an iPhone 4 as seen through the Developer Tools in Chrome below :

    The styles would appear "grayed-out" if they were being overridden by another style. Have you consider using Responsive Design within your application as opposed to manually styling each possible device that you want to target? It would likely save you quite a bit of time and effort as it would group various sizes of devices together and allow you to have a single style that looks good across multiple form factors.

    Depending on your requirements, a responsive web application may be a much easier to implement solution as you'll just have to design a single web application that will run on any device (phone, tablet, desktop) that has a web browser and your users will enjoy the same experience (thanks to Responsive Design). This will allow you to retain your existing appearance and change it for smaller resolutions.

    Consider Responsive Design

    Consider using one of the many Responsive Design Frameworks that are out there for your site, such as the Twitter Bootstrap. Responsive design focuses on making your site easily usable and accessible from basically any resolution and devices available.

    These could fairly easily be integrated into a Web Forms or MVC application and would basically be all that you would need to use : 

    If you don't want to dive into that, you would also always consider using percentages (or viewport calculations) to handle this as well.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 27, 2015 10:07 AM