SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Media Queries - iPhone Vs iPhone 4

    I've built a site with a tight secondary navbar down the left hand side (Quicklinks).

    Works great on a computer screen with a pointing devices but when viewed on an iPhone you hit about four links at a time with your finger however careful you are. But that didn't bother me as I'd planned to use a media query to target the iPhone and point it to another style sheet, a sheet that would give those 'quick links' plenty of padding and large margins.

    My naivety was soon exposed and my plan shot down in flames when I discovered that the iPhone 4 has a screen resolution that when veiwd in landscape, matches some computer screens.

    How then can I target both iPhones while not catching any computer screen in that query? I'm guessing I can't without JavaScript which I do not want to use.

    Looking at the regular screen sizes, maybe I have nothing to worry about as the stats seem to suggest that 96% of computers use 1024 X 768 and above.

    Maybe I would be safe in pointing both iPhones...

    iPhone 4
    640 X 960

    Older Phones
    320 x 480

    To a single Style Sheet by using....
    <link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 960px)" href="iphones.css" />

    And leave everything above 960px to my regular style sheet, including the iPad...

    iPad
    1024 X 768

    I'll write another sheet for mobile devices below 320px but in this case, I'm not really too bothered about those at present.

    Will my cunning plan work or is it fatally flawed from the start?

    Regards, Karl.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Strangely and/or happily, iPhone 4 uses the same settings as the older version, despite its greater resolution. Here is a post about it:

    http://www.mobilexweb.com/blog/iphon...afari-viewport

    So iPhone 4 will still follow this:

    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Strangely and/or happily, iPhone 4 uses the same settings as the older version, despite its greater resolution. Here is a post about it:

    http://www.mobilexweb.com/blog/iphon...afari-viewport

    So iPhone 4 will still follow this:

    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
    Ralph...
    You're a life saver!
    I couldn't get any query to pick-up my iphone.css. Tried everything to no avail...pasted in your <link> and it picked it up immediately . I don't know what I was doing wrong but hey, it's all working now and that both iPhone pull the same iphone.css sheet is a bonus.

    Thanks again, Karl.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by karlos1001 View Post
    I don't know what I was doing wrong...
    I haven't gotten into @media in a big way, but I agree, these queries are quite confusing, and I just have to tinker around until they suddenly work. Will have to study them more closely in the near future.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You should be able to use that in conjunction with

    <meta name="viewport" content="width=device-width">

    While supposedly you're able to also actually set the width here, that doens't work with iWhatevers (you can't do content="width=380" even though the specs allow it).

    Also wondering if there's a reason iPhone specifically and only is targeted. You have an iPhone css... what about other touch devices?

  6. #6
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Also wondering if there's a reason iPhone specifically and only is targeted. You have an iPhone css... what about other touch devices?
    Good point Stommes.
    As you can probably see, I'm crashing along with this making every mistake possible but still learning. I certainly do want to cover everything but as I'm rather slow and time is pressing this site is aimed at computer screens and iphones only...least at present.

    One of my main problems is that I do not have either a simulator or any other device to test anything but an iPhone with. On top of that I am somewhat ignorant of what is out there. I have heard of the Android (OS?) and mini Opera browser but haven't a clue how to test them or the devices they may be on.

    On this particular project, I learned too late that as many smaller handheld devices don't pickup CSS style sheets that I should have simply left my first main style sheet fluid and used Media queries to pick-up more able sheets with screen sizes. I've only just corrected some bad planning that effected the iPhone view when having the content in the wrong order in the HTML.

    All these mistakes have taught me much but my ignorance of and lack of being able to test other devices is certainly a problem. I currently test with my Mac and XP via Parallels...

    Safari (Mac & PC)
    Firefox (Mac & PC)
    Opera (Mac & PC)
    Internet 6, 7 and 8 (UtilU IE Collection - PC)
    iPhone 3 & 4 (iPhone Simulation and an iPhone 3)

    Regards, Karl.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by karlos1001 View Post
    I am somewhat ignorant of what is out there.
    Have a look a the bottom link in Stomme's signature. It's on this very subject, and is a real cracker.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hey Karl:
    http://www.slideshare.net/bryanriege...e-web-by-yiibu (slideshare)

    I was at a front-end conference and someone referenced these slides (that speaker wasn't at our conference). If you're going for a worldwide audience, Nokia is king, and feature phones and dumb phones are still leading actual smart phones.

    It won't stop you from fumbling around (I'm still fumbling) but I think it's excellent in giving perspective on what's out there and how badly sites fail if we're relying on media queries (as you've seen).

    So far I've been trying to do what's mentioned in the slides, and I end up with
    (in <link> tags)
    -a basic css with fluid whatevers and stuff that works on small screens
    -a desktop css called with media queries (so, some older desktop browsers are not getting this)
    -something for IE since not a single IE supports MQ's yet (IE9 will but my clients are going to be on XP for a long time to come anyway)

    Luckily it's not the same as IE-only stylesheets... it's the same stylesheet the other desktop browsers get, and since IE passes over the regular <link> because it sees and does not understand the media queries, there is no extra download. So, mostly the same work from your server.

    *edit lawlz ralph ninja'd me.. but some people block sigs so they don't see them at all.

  9. #9
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've seen that slide show, it's great and that is what has me desperately trying to readjust the way i do things.

    At the moment I'm using <link>s, and a whole load of them

    Code:
    <link rel="stylesheet" media="screen" href="index.css" />
    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
      
     <!--[if IE 6]>
    <link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
    <![endif]-->
    
      <!--[if IE 7]>
    <link rel="stylesheet" href="ie7.css" type="text/css" media="screen">
    <![endif]-->
    
      <!--[if IE 8]>
    <link rel="stylesheet" href="ie8.css" type="text/css" media="screen">
    <![endif]-->

    A bit embarrassing and a load of hits to the server but as I've got to get this site up and running fast and my knowledge is incomplete that is how I'm having to go, learning allot by doing it though, making me think and understand allot more of the terminology and quotes you guys are coming out with. Before it was a total blur but now starting to make sense.

    It is odd how some like to use multiple <link>s
    Others one sheet with @media statements in it
    And yet others with one control sheet which @imports other style sheets.

    I'm all at sea not really knowing which to use, and with IE not playing ball I guess it's got to be a mixture either way!

    Am I right in saying that if I use a <link> and leave it fluid but style other elements that if I also add 'handheld' all small simple phones etc... (including Nokia) will use it? As I understand it, many simply devices wont touch @media or @import but will all <links>

    ...I'm struggling that much I can hardly even construct a question about it...

    Appreciated, Karl.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Don't use the media query on the iphone sheet
    because of all the phones who don't support media queries

    do

    Code:
    <meta name="viewport" content="width=device-width"> 
    
    <link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="basicfluidsimple.css">
    
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px), projection and (min-width: 600px)" href="desktop.css">
    
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" media="screen" href="desktop.css">
    <![endif]-->
    In my case, IE has a single stylesheet, calling the exact same file as the link above with the media query (which IE will just ignore).

    If you must have something different for IE6, then I guess you'd have two IE conditional comments. If you do, then you have the same penalty as anyone else who has a separate sheet for IE6, but the media queries aren't giving you an extra penalty.

    So here, everyone gets basicfluidsimple.css. This has all the styles for mobiles, as in it works fine at small viewports. All browsers get this file! I add "handheld" to the media list for whichever handhelds demand to see that; the smart phones like "screen" though. Projection I'm not sure if needed... Opera desktop uses it, but not sure about Opera Mini or Mobile.

    Then, browsers who are wider than (in this case, 600px) who also understand media queries will load desktop.css, which has background images, floats, and widths etc.
    This means
    Opera7+
    Safari3+
    Chrome (all chrome?)
    Firefox 3 or 3.5+ I forget which
    IE9

    So this leaves out
    Safari 1 and 2
    Firefox before either 3 or 3.5 (again I forget)
    IE6-8 and below.

    Since Microsoft gives us Conditional comments, I went ahead and made the decision that any IE viewing my page is a desktop browser with desktop dimensions... this is NOT necessarily true as there is IE6 on the Windows CE mobile OSes! Oh well, tough (you may not have that luxury).

    So then I wrap the same statement, just without the media query, in IE CC's for IE6-8.

    This still leaves out
    Safari 1 and 2
    older Firefox
    I believe Konqueror is also left out, but, *shrug*.

    This may not be acceptable and if it isn't, your options are
    don't do it like this (mobile-first)
    or
    have the server check the user agent, hope the user agent is correct, hope you have an updated list of user agents, and serve the desktop stylesheet to those older desktop browsers.

    Anyway, if you do your stylesheets mobile-first, then no mobile has to have media queries. Even though iphone may well support them. So, in theory, ALL phones and PDAs who support stylesheets get the basic stylesheet.

    The problem then isn't mobiles who don't support media queries but desktops who don't. Other than IE, the desktops we have to worry about are (mostly) pretty old. And it seems my K-Meleon (a FireFox version who works only on Windows but uses the old Gecko engine of FF2) supports the media queries (that or it's just loading them anyway), so it's getting the desktop css as well. This browser still gets updates so people may be using it.

  11. #11
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Stommes.
    Some of this is a bit over my head and the complications of the numerous older browsers, I just have to ignore at this stage of my learning but I get allot of what you're saying.

    I can see that the first thing I need to clear-up is my definition of just what a Media Query is...

    So, is this a Media Query (in a link)
    media="screen, projection, handheld"

    …and this not a media query?
    media="screen"

    When is media="" a query and when isn't it or when does it become one?

    I didn't know that some iPhones don't pick-up Media Queries. :O
    ---------------------------
    I have to take things one step at a time, once I 'get a grip' on something simple then I can add a bit more to it. The way I'm starting to think is that it just might be best for me to think in this simple way until I get going…

    1). A fluid style sheet <link> Including the words 'handheld' that all devices and browsers would pickup if it were not for additional <links>. Thus this will be picked-up by all simple small screens and devices.

    2). Then a <link> that will pickup everything greater than 320px which will start to pickup all the iPhones.

    3). Then the next will pickup everything over 960px which shouldn't pickup any iPhones but all iPads and computer screens,

    4). And maybe another…say greater than 2000px for TV's.

    5). An conditional to pick-up IE8 and below.

    If done in that order, if the browser/device qualifies for the next link down it will move on, if not it'll use the last it qualifies in.
    ------------------------------

    That would leave out any complicated queries.

    The reason I targeted the iPhone so much is because to make the site workable on an iPhone without zooming-in I chose to greatly increase the size of the navigation buttons and give them a load of padding and margins. I also had to swing one (display: table-cell under another

    I also found that on this particular site, there was quite a big difference between the three versions of IE that I needed to fix, and I was unable to combine even two to a single style sheet.

    What is the problem with multiple server hits? Does it show on the stats, slow down load time or on exceptionally popular sites, have a cost effect regarding bandwidth?

    Sorry for all the questions but bit by bit I'm getting there!

    Oh, one final thing...whats with the...
    <meta name="viewport" content="width=device-width"> thing, what does it actually do?

    Appreciated, Karl.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I can see that the first thing I need to clear-up is my definition of just what a Media Query is...

    So, is this a Media Query (in a link)
    media="screen, projection, handheld"

    …and this not a media query?
    media="screen"

    When is media="" a query and when isn't it or when does it become one?
    There are basically 2 media thingies (and it's prolly stupid of me to call them all "media queries"): there's the media types from CSS2 which most browsers support (so, IE even knows the difference between "screen" and "print" for example);
    ...and then there's the newer CSS3 media queries which have additional constraints (min/max width, orientation, color, etc). These are slowly getting supported by more and more browsers, but older browsers don't support these (unless you use a Javascript that reads these media queries for the browser). It makes sense: these newer media queries weren't in the specs when some of these older browsers were made.

    I didn't know that some iPhones don't pick-up Media Queries. :O
    I dunno, I thought all iPhones picked up media queries, they just don't always get some of the other meta tags correct (ppk from quirksmode.org has been testing mobiles for a while and he's noticed that trying to set "device-width" to something isn't done correctly). More importantly, most other phones don't pick up media queries, though this partially has to do with the browser they're using (Opera Mini and Mobile and the multiple versions of Webkit out then tend to support, but the phone I believe has to correctly report its dimensions to the browser).

    I have to take things one step at a time, once I 'get a grip' on something simple then I can add a bit more to it. The way I'm starting to think is that it just might be best for me to think in this simple way until I get going…
    The reason I only have two sizes (under 600 and over 600) is because I'm not all that comfortable with these media queries, and while I have colleagues with different phones, I'm not a phone user myself so I hateses teh testings.

    1). A fluid style sheet <link> Including the words 'handheld' that all devices and browsers would pickup if it were not for additional <links>. Thus this will be picked-up by all simple small screens and devices.
    No, browsers will pick it up ANYWAY. So, everyone gets this stylesheet! Meaning your following stylesheets are smaller and build on this single stylesheet.

    2). Then a <link> that will pickup everything greater than 320px which will start to pickup all the iPhones.
    Nah, throw this together with your first one. Unless you're making a stylesheet for 100px-wide phones? You can aim for that in your "small-everything" stylesheet, but for instance I have form selects which are wider than 100px... I can't not have a scrollbar for those folks anyway. I'm sure it's hell surfing teh interwebz on those phones anyway.

    3). Then the next will pickup everything over 960px which shouldn't pickup any iPhones but all iPads and computer screens,
    So long as you keep device-width meta tag, you'd be good. The iPhone4 has a resolution of 960px, but if you have that meta tag, then it knows to look for your actual PIXEL settings in your media queries. Cause you don't want the iPhone4 to think it can handle your 960px-wide web page.
    Oh, one final thing...whats with the...
    <meta name="viewport" content="width=device-width"> thing, what does it actually do?
    That's what it does: tells the browser to see your (min-width: 960px) as device pixels and not resolution (the iPhone 4 definitely does not have 960 pixels in width, but does have 960px-worth of screen resolution).

    There's also
    <meta name="viewport" content="width=480px"> or whatever but as I said, ppk has discovered that not a single iPhone reads that correctly... some will turn that to "320px" and others... who knows...

    4). And maybe another…say greater than 2000px for TV's.
    Don't torture yourself unless you did something really, really bad.

    5). An conditional to pick-up IE8 and below.
    Which is easy if you just have the "small-screen" css (IE will get that one because it has no media queries on it, only media types... and IE does not understand handheld or projection but it DOES know screen) and a 960px one (so you'd sent the 960px stylesheet to IE6-8 without the min-width stuff) but know that this means desktop users with modern non-IE browsers will be getting your small-screen styles if they're on a 800px monitor (then again, I like to think those people are also IE6 users, but actually this isn't any more likely to be true).

    If done in that order, if the browser/device qualifies for the next link down it will move on, if not it'll use the last it qualifies in.
    Nah they cascade.

    This is why I do this:
    <link type="text/css" rel="stylesheet" href="somecss.css" media="screen, projection">
    <link type="text/css" rel="stylesheet" href="print.css" media="print">

    While other people do this
    <link type="text/css" rel="stylesheet" href="somecss.css" media="all">
    <link type="text/css" rel="stylesheet" href="print.css" media="print">

    I do it my way because I don't want to have to undo all my screen stuff for print. That's more code and I'm lazy. I'd rather write less code. Since the latter says "all" (or if you don't mention a media it's "all"), then that stylesheet gets into the cascade of the next stylesheet, print. They all meet each other.

    So what's happening in my styles is, everyone is getting the small-screen css and then the desktop.css is building on top of that (and undoing some things which I did specifically for small screen like more padding on buttons etc). It's not that a browser will abandon its last stylesheet when it comes across a newer, shinier one... it's that it will continue to "add" stylesheets to its total styles and will skip over the ones that have a media query that the browser knows it does not match (so we are using media queries to exclude new sheets, instead of using them to add new sheets).
    ...and that is what those slides are saying. Let only those who understand media queries get the desktop css; by doing this, we avoid the bunch of mobiles who don't know media queries, while then only having to deal with any desktops (and above) who don't understand them. Which is possibly easier to detect via server as well (since all the possible combinations of phones and PDAs and mobile OSes etc is huge and growing).

  13. #13
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for a very informative post Stommes.

    You've manages to get me to at last remember what the word 'cascading' in CSS really means!

    In reality we do have allot to deal with though (@screen, @import, @media, <link> CSS2 and CSS3 queries and then throw into all that IE conditional comments!

    And as you point out, it is not likely to settle down in the foreseeable future with all the new devices popping-up. Though we have quite an arsenal of tools available to target those devices, OS's and screen sizes I guess nobody has a definitive way of dealing with it all yet, it seems that as all the pros approach this differently at present I'll have to find a way that I'm comfortable with too.

    Thanks again Stommes, appreciated, Karl.

  14. #14
    SitePoint Addict
    Join Date
    Jun 2009
    Location
    Norfolk - UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    He's doing the same problem: assuming phones, PDAs and other small devices understand media queries.

    See comments by Andrew Hedges and "cancel bubble" (lawlz I can guess what that person does for a living).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •