SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    max-device-width for all phones?

    I've been using the following to increase certain font sizes on phones.

    @media only screen and (max-device-width : 720px)

    It works on every phone and browser I've tried except Firefox on Nexus 4. It does work on Chrome on Nexus 4 as well as Firefox on Galaxy Nexus. If I increase it to 768px it works on Firefox on Nexus 4 but I think that will trigger iPads too.

    Has anyone found a good way to target only phones?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    As an aside, it's better to use max-width rather than max-device-width, but anyhow, are there really phones that huge? I can't image a phone with a declared screen width of 720px.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a chart of a bunch of devices and their declared widths a while back and I decided on 720px based on that. I can't seem to find it now.

    Why would Chrome trigger at 720px (surely also lower) and Firefox doesn't trigger until 768px on the same device?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    max-device-width is based on the phones native resolution whereas max-width is based on the total available room the browser has to work with, typically 640px is the maximum width of a standard smartphone in landscape. From my experience working with media queries the below are standard breakpoints.

    Mobiles
    320px
    480px
    640px

    Tablets
    768px
    1024px - landscape

    Desktops
    1124px

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using max-device-width, I'm not sure why Chrome would trigger at 720px (probably 640px actually) and Firefox doesn't trigger until 768px on the same device. Do you understand why that would happen?

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is due to the max-device-width implementation within the browser itself, as I said above this is based on the device's native width which Firefox implements correctly, max-width will work on any device as it's based on the total available room that the browser has from its internal application edges.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand you correctly, you're saying mobile Firefox implements max-device-width correctly and mobile Chrome doesn't?

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    That's correct, I've come across the same issue on both iOS and Android devices with Chrome/WebKit browsers (not Safari) but Firefox never seems to have an issue.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What makes you sure that it isn't WebKit that is using the correct device-max-width and Firefox that's doing it wrong? Are official max-device-width specs for various devices published online?


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
  •