Css media queries for different devices (Mobile & tablet)

    Edit article
    Css media queries for different devices (Mobile & tablet)

  • 1 Iphones 4 and 4s Portrait and Landscape


    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

  • 2 Iphone 5 and 5s Portrait and Landscape

    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

  • 3 Iphone 6 Portrait and Landscape

    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

  • 4 Iphone 6+ Portrait and Landscape

    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3) {

    }

     

  • 5 Other Mobile Phone Portrait and Landscape

    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) {

    } AND 

    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) {

    }



  • 6 Ipad Portrait and Landscape

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

  • 7 Galaxy Tab Portrait and Landscape

    @media
    (min-device-width: 800px)
    and (max-device-width: 1280px) {

    }

  • 8 Laptop Portrait and Landscape

    @media screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1) {
    }