Bootstrap multiple resolution all layout inline media query CSS for responsive design including Android iphone and web asp.net

Question

I have finished a website, it's working fine in browser now. I have been asked to make it compatible with Android, iPhone, iPad, Tablets,and web etc. I'm using bootstrap asp.net.

Now I'm trying and couldn't find any answer. I'm using these inline media queries

@media screen and (min-width:0px) and (max-width:320px){/*Any css will be defined here*/}
@media screen and (min-width:321px) and (max-width:480px){/*Any css will be defined here*/}
@media screen and (min-width:481px) and (max-width:540px){/*Any css will be defined here*/}
@media screen and (min-width:541px) and (max-width:775px){/*Any css will be defined here*/}
@media screen and  (min-width:768px) and (max-width:783px){/*Any css will be defined here*/}
@media screen and (min-width:776px) and (max-width:1536px){/*Any css will be defined here*/}
@media screen and (min-width:1537px){/*Any css will be defined here*/}

But in some iPads the CSS is not applied. Now my question is, what's the standard resolution and orientation for @media which will cover all (Android, iPhone, tablets and Web etc) CSS?

Solution 1

/* 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),
and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

That's what I use, and it works for almost everything.

Solution 2

After spending many hours I found this helpful. This is used by Bootstrap itself and I followed that. It will cover all the devices (Android, iPhone Tabs and web etc).

    @media handheld, only screen and (max-width: 2200px)
    {
     /* Styles */
    }
    @media handheld, only screen and (max-width: 1200px) 
    {
     /* Styles */
    }
    @media handheld, only screen and (max-width: 1024px) 
    {
    /* Styles */    
    }
    @media handheld, only screen and (max-width: 767px) {
     /* Styles */
    }
    @media handheld, only screen and (max-width: 600px) {
     /* Styles */
    }
    @media handheld, only screen and (max-width: 500px) {
     /* Styles */
    }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Styles */
    }