SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Greece
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Media queries targeting the screen SIZE?

    I want to create separate layouts for small vs big screens. Nowadays smartphones come with very high resolutions so counting on pixels won't cut it. Is there a way to know screen size in inches and style accordingly?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EvanGR View Post
    Nowadays smartphones come with very high resolutions so counting on pixels won't cut it.
    Actually, they do cut it, because those phones still act as if they were smaller. That is, even though the iPhone has far more px than 320 horizontally, it still respects rules for that width (or acts as if it is 320px wide). So you can still use settings like these:

    http://css-tricks.com/snippets/css/m...ndard-devices/

    (I'm not using the right terminology here, but hopefully you get the idea.)

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can't test for screen size using media queries. You can only test for viewport size (which is only the same thing when the browser displays the web page using the entire screen with no space taken up with browser controls or anything wlse).
    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="^$">


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
  •