Skip to main content

How to target iPhone 3GS AND iPhone 4 in one @media query

Image
By User



I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.





I have established that the best method is to use @media queries from the CSS3 spec,





As such these are my media queries at the minute:







@media screen and (max-width: 1000px) { ... }







Above is for small desktop and laptop screens.







@media screen and (max-width: 700px) { ... }







Above is for the iPad and VERY small desktop/laptop screens.







@media screen and (max-device-width: 480px) { ... }







Above is for iPhone 3GS- and mobile devices in general.





However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):







@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }







Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,





Therefore making my question;





How do I create an @media query that points both the iPhone 4, 3GS and other mobiles to the same styles?


Labels:

Comments

  1. Tips For AllMarch 9, 2012 at 6:32 AM

    I'm not sure if there's a single catch-all media query for all iPhones and iPod touches. In the meantime, you can use a comma to group both media queries for standard and Retina displays to a single rule, just like you use it to group selectors:

    @media only screen and (max-device-width: 480px),
    only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
    }

    ReplyDelete
  2. Tips For AllMarch 9, 2012 at 6:32 AM

    BoltClock's answer seems pretty good to me at the moment.

    However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.

    I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.

    To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)

    @media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
    }


    Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )

    ReplyDelete
  3. Tips For AllMarch 9, 2012 at 6:32 AM

    I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.

    Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.

    ReplyDelete
  4. Tips For AllMarch 9, 2012 at 6:32 AM

    I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.

    @media only screen
    and (device-width:320px)
    and (device-height:480px)
    and (-webkit-device-pixel-ratio: 1) { ... }


    In order to work this query requires that you use Safari's viewport meta tag to fix the browser to 100% with the following:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.

    Lists of phone resolutions


    Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
    Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
    Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html


    All information was considered as of post date.

    Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more

Is it possible to have IF statement in an Echo statement in PHP

By User
Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.
5 comments
Read more