SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    testing screen resolution

    hi

    I'd like to use different divisions in my web page depending on the the screen resolution. How can I do this ?

    I've found this exemple

    HTML Code:
    <!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="ie-7lte-hacks.css" media="screen" />
    <![endif]-->
    as far as I know html doesn't have IF, so how does this work ?

    And is there something similar for screen resolution ?

    TIA
    pat

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Actually that is a conditional comment, you are right that HTML does not have IF statements but that is a propriatory comment produced by Microsoft which only works in Internet Explorer, all other browsers ignore the statement as it's just a comment which IE chooses to read more into. No there isn't a specific version that works for screen resolution, you could use JavaScript but screen resolution is not an accurate method of documenting the browser width as most people don't have browsers maximized or have stuff in sidebars.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can use JavaScript to work out the browser viewport size if your visitor has JavaScript enabled. The screen resolution is irrelevant to anything within the web page as the viewport is usually smaller (but can also be bigger) than the screen resolution and the viewport is where the page is displayed. That isn't going to work for those without JavaScript though.

    You can design your CSS with fixed width blocks inside percentage width ones so that they will restack in different ways depending on the width.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very helpful

    Quote Originally Posted by felgall View Post
    You can use JavaScript to work out the browser viewport size if your visitor has JavaScript enabled. The screen resolution is irrelevant to anything within the web page as the viewport is usually smaller (but can also be bigger) than the screen resolution and the viewport is where the page is displayed. That isn't going to work for those without JavaScript though.

    You can design your CSS with fixed width blocks inside percentage width ones so that they will restack in different ways depending on the width.

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Quote Originally Posted by AlexDawson View Post
    Actually that is a conditional comment, you are right that HTML does not have IF statements but that is a propriatory comment produced by Microsoft which only works in Internet Explorer, all other browsers ignore the statement as it's just a comment which IE chooses to read more into. No there isn't a specific version that works for screen resolution, you could use JavaScript but screen resolution is not an accurate method of documenting the browser width as most people don't have browsers maximized or have stuff in sidebars.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You can use CSS media queries to apply differently styling to elements depending on, for example, the dimensions of the viewport.

    See http://www.w3.org/TR/css3-mediaqueries/#media1 for more details.

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks interesting, I'll try it, thanks

    Quote Originally Posted by Stevie D View Post
    You can use CSS media queries to apply differently styling to elements depending on, for example, the dimensions of the viewport.

    See http://www.w3.org/TR/css3-mediaqueries/#media1 for more details.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Stevie D, the major flaw in CSS Media Queries and the reason I didn't include them is very few devices actually support them (we are talking the low single digit percentages here), CSS3 is a draft specification as it is, and media queries are really not on any priority list so personally I wouldn't count on them for anything more than a "stab in the dark" theory.

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that explanation

    Quote Originally Posted by AlexDawson View Post
    Stevie D, the major flaw in CSS Media Queries and the reason I didn't include them is very few devices actually support them (we are talking the low single digit percentages here), CSS3 is a draft specification as it is, and media queries are really not on any priority list so personally I wouldn't count on them for anything more than a "stab in the Thanks dark" theory.

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    The major flaw in CSS Media Queries and the reason I didn't include them is very few devices actually support them (we are talking the low single digit percentages here), CSS3 is a draft specification as it is, and media queries are really not on any priority list so personally I wouldn't count on them for anything more than a "stab in the dark" theory.
    A man can dream...

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    A man can dream...
    I would prefer to dream of support for multiple background images


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
  •