SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Media Queries - Responsive Web Design Ipad Issue

    Hello,

    I have searched all over and have tried everything and can't seem to pin point my issue. I have a site at http://www.heatsurge.com and it is using Media Queries to display the mobile version of the website. This looks great on the iphone and android phones, but here is my problem. The site works great on Ipad landscape mode but in portrait mode it is to large. I don't know what I am doing wrong, I have tried a handful of different techniques but still am unsuccessful. The overall goal is to have the site look the same in both portrait and in landscape on the ipad just as it looks like on a computer screen, the only difference is the phone/mobile version. Does anyone that is familiar with this technique have any hints or tips they can send my way?

    Thanks in advance.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cant seem to find any @media rules for targeting the ipad anywhere in your code...unless I'm missing something! Plus I notice you are not using reponsive grids in your CSS i.e. You have set pixel widths rather than percentages or ems.

    Try these rules and appy your styles where appropriate for ipad.

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is correct I am not trying to target the ipad. I want the ipad version to be just like the screen/monitor version. I am only targeting the iphone/android size devices. If I remove the view port meta tag <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" /> then it displays correct on the ipad like it should. Just not very familiar with all the viewport stuff. I just want to target the small device only.

  4. #4
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has there been a solution to this yet? I am facing the exact same issue. I don't see the point of creating a separate stylesheet for iPad portrait mode. What's the point of it? It would be nice if my landscape stylesheet scaled down automagically. How can this be done?


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
  •