SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Minimum Smartphone Screen Width and best strategy

    Hi guys,

    I have recently opened the pandora's box of responsive design and although I am a strong CSS developer, I have had to learn mobile/tablet development on the fly, just haven't had the time to hit the books as much as I normally would due to vast workloads so I want to just describe what I am doing and to pick your brains.

    So anyway I am going with mainly media query based designs and I have a choice of have 2 queries that I have been using for mobile lately,
    HTML Code:
    @media only screen and (max-width: 767px) {
    
     #tagline .row .eightcol {
    width: 97%;
    }
    
    }
    OR...

    HTML Code:
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    
     #tagline .row .eightcol {
    width: 97%;
    }
    
    
    }
    Now I am wondering if the second one is even relevant because surely the smallest device I should really care about is something like a smaller screen smartphone, maybe something like 3" display. Anything smaller would be such an inferior device(like a tiny Nokia) that people wouldn't want to browse the web much anyway, am I right or should I use the second query above and then have one below that again to target the really tiny devices?

    I suppose its maybe how long is a piece of string and how much is someone paying you but atm I am just using the below 767px one and all Smartphones (that I have seen anyway) look fine.

    Your advice is much appreciated.
    "Persistence is the path to perfection"

  2. #2
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should also add that I am not taking into account portrait and landscape on mobile , the sites I am doing will work on either, they are not complex enough to worry so its not that I haven't considered it, its just that I want a reliable media query for mobile and to do that I need to know what other developers do about REALLY small screens.
    "Persistence is the path to perfection"

  3. #3
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,878
    Mentioned
    46 Post(s)
    Tagged
    0 Thread(s)
    It varies as per the phone's default viewport settings. This is not, per se, WebKit's doing, but rather the implementation of the browser on the device. Here are some default layout widths: Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

    You could check into these for more info: http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html


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
  •