SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast RichestGirl's Avatar
    Join Date
    Nov 2008
    Location
    US
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Layout breaks based on physical screen size?

    Hello friends,

    Here is I have some question about responsive webdesign but this is bit different then standard media Query.

    I need only one column in my layout while it is viewed in 1024px wide Galaxy Tab.
    And I need 2 columns in my layout while it is viewed in 1024px wide computer/laptop screen.

    Here my concern is physical computer screen size.
    in Galaxy Tab it is 7" and in Computer screen it is about 14" for same resolution.

    Kindly advise.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    One way to distinguish between the two devices is as follows, based on the display (retina and non-retina):

    Code:
    @media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    	styles for Galaxy here
    }
    
    @media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    	styles for iPad here
    }

  3. #3
    SitePoint Enthusiast RichestGirl's Avatar
    Join Date
    Nov 2008
    Location
    US
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I agree with your idea about retina and non-retina.

    but there are many other Tablet which have same -webkit-min-device-pixel-ratio as it with desktop. only Apple device is getting it different.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Ultimately I'd say forget about devices, as there are too many to worry about. If people don't like the size of their display then they can get a different device. Just make sure that your content is readable and decently laid out at the various screen sizes and let the device worry about how it renders things.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    actually you need to think RATIO not device.

    so:
    Code:
    @media only screen and (max-width: 1024px)   {
    	styles for NON_RETINA  here
    }
    
    @media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    	styles for RETINA  OVERRIDES here
    }
    android , apple, and usesr of chrome, safari, the new opera, and, i think, DOLPHIN understand all if not most WEBKIT declarations... FF and MS users will always get the default rules.. but I am not certain of how many regular mobile folks are using FF or IE; probably not a significant number.

    Also... when desktop monitors go retina... i suppose all bets are off.


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
  •