www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24

Thread: Responsive media queries not working

  1. #16
    Though, the specification says "rendering surface" -- in programmers parlance that IS the content context of the window. (At least that's how the term is used in the windows API, OpenGL and GTK). I suspect MDN misinterpreted that. (big shock)

    I used to think MDN was better than W3Schools -- I'm starting to find a whole slew of glaring / misleading errors and outright crappy code that makes me start to think it's the same dance, just a different tune.

    No, that's not a good thing.

    It's likely just the specification not lining up with one possible interpretation of a vague "specification" -- which when it's vague, it's not actually a specification.

    Which is why when I say "specification" on anything newer than HTML 4.01 Strict, I make air quotes with my fingers. The "What The **** Working Group" and their "living document" / "let's get rid of versioning" idiocy being proof enough of that.
    Last edited by deathshadow; 08-07-2014 at 05:30 PM.

  2. #17
    Join Date
    Mar 2012
    Posts
    1,742
    @ deathshadow

    I agree that "width" and "height" are the available width and height. Also the meta "width=device-width" and "height=device-height" have the effect you describe. But I do not see the logic of "device-width" meaning "window width" in any circumstance. Device-width is the device width. Well, that is my understanding.

    Also that is my experience of how it works. At least, given the code like:
    Code:
    @media (max-width:800px) {
    /* do A */
    }
    @media (max-width:640px) {
    /* do B */
    }
    @media (max-device-width:640px) {
    /* do C */
    }
    1. A window 720px wide displayed on a PC screen width 1360px will do A.

    2. A window 480px wide displayed on a PC screen width 1360px will do B.

    3. A smartphone with screen width of 480px will do C.

    What a smartphone/tablet with a (claimed) screen resolution of 800px may vary, but that is the fault of the manufacturer.
    Last edited by jedaisoul; 08-08-2014 at 11:20 AM.

  3. #18
    Think of it as a short name for "width in device pixels" instead of "width in fantasy-land scaling pixels that aren't pixels". Width ON the device instead of width OF the device. Amazing what changing one preposition can do for a meaning. The specs AND individual browser makers interpretations of them are rife with that sort of thing. For example see how <b> and <i> have semantic meanings -- it WOULD BE in professional writing, that doesn't mean it MUST BE. You swap the transitive verb...

    Which is basically what px is on mobile, most of the time it's a giant lie unless you tell it NOT to lie. Width IN device pixels, width OF the device.

    You'll see misinterpretations like that a lot -- especially on sites like MDN. The more I read it, the more I'm souring on it as I read it, read the spec... look at the implementation... uhm, Houston?

    But then everything they've done since HTML 2 has been needlessly wordy, while at the same time every version of HTML and CSS are also needlessly vague; it reeks of loophole ridden legalese, instead of actually being written by people who know what a specification is.

    Rule I learned in the '80's -- Never let lawyers, marketers or artists create specifications... that's an Engineer's job... and never let an engineer implement it; that's what people with ACTUAL experience are for.
    Last edited by deathshadow; 08-10-2014 at 05:45 AM.

  4. #19
    Join Date
    Mar 2012
    Posts
    1,742
    I'm not particularly bothered by what trickery mobile makers get up to. I use the meta statement which is supposed to make them behave. If they choose to persist in lying, my code will deliver a screen layout suitable for the width they report. Do with it what they will...

    I'm more interested in segregating the small-screen devices, which may need a simplified display, from normal PCs and large-screen devices. The above code achieves that.

  5. #20
    Quote Originally Posted by jedaisoul View Post
    I'm more interested in segregating the small-screen devices, which may need a simplified display, from normal PCs and large-screen devices. The above code achieves that.
    That really is the point - everything else is gravy. Thing is, if everything actually obeyed device width (which is coming) that last "part C" is going to fail or worse, be applied where it shouldn't.

    Of course, if you have set that META, they're the same thing, so there's no reason to say device-width in the CSS in the first place.

  6. #21
    Join Date
    Mar 2012
    Posts
    1,742
    I do not understand your point. I haven't tested the range of browsers, but so far it seems that PC browsers distinguish between "width" and "device-width", which my code makes use of.

    If you are right and future PC browsers will treat "width" the same as "device-width", my code will become redundant. But how bad is that? Many sites are littered with obsolete code that is ignored by later versions of the browsers.
    Last edited by jedaisoul; 08-13-2014 at 04:45 AM.

  7. #22
    Join Date
    Oct 2013
    Posts
    557
    Quote Originally Posted by deathshadow View Post
    Never let lawyers, marketers or artists create specifications... that's an Engineer's job... and never let an engineer implement it; that's what people with ACTUAL experience are for.
    So that's my problem. I'm a musician (trumpet & voice) AND a civil engineer. I'm royally screwed...

  8. #23
    Join Date
    Jul 2014
    Location
    Dubai, United Arab Emirates
    Posts
    15
    Simply add this code, this code will enable responsive on all devices. <meta name="viewport" content="width=device-width, initial-scale=1">

  9. #24
    Join Date
    Mar 2012
    Posts
    1,742
    Quote Originally Posted by w3responsive View Post
    Simply add this code, this code will enable responsive on all devices. <meta name="viewport" content="width=device-width, initial-scale=1">
    Oh no it doesn't! All that code does is tell mobiles not to lie about their screen dimensions, and to initialize the zoom. So it is a prerequisite of a responsive display on mobiles, it does not enable responsiveness on mobiles, let alone all devices.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles