Media Queries for mobile devices #css #mediaquery

untitled

/* big tablets only */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  
}

/* tablet landscape */
@media screen and (max-width: 1024px) {

 }

 /* tablet portrait */
@media screen and (max-width: 820px) {

}

/* disable mobile phone landscape */
@media only screen and (max-device-width: 820px) and (orientation: landscape) {

    body {
        width: 100%;
        height: 100vh;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzggMTc4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNzggMTc4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRDJEMkQyIiBkPSJNODguNywxNzAuNUgzMi42Yy0wLjYsMC0xLTAuNC0xLTFWOTUuMWMwLTAuNiwwLjQtMSwxLTFoNTR2LTcuNUgxNWMtOC4zLDAtMTUsNi43LTE1LDE1VjE2MwoJCQljMCw4LjMsNi43LDE1LDE1LDE1aDg2LjdDOTYuMSwxNzgsOTEuMywxNzUsODguNywxNzAuNXogTTE3LDE0OS4yYy0xLDAtMS44LTAuOC0xLjgtMS44czAuOC0xLjgsMS44LTEuOGMxLDAsMS44LDAuOCwxLjgsMS44CgkJCVMxOCwxNDkuMiwxNywxNDkuMnogTTE4LjgsMTM4LjdjMCwxLTAuOCwxLjgtMS44LDEuOGMtMSwwLTEuOC0wLjgtMS44LTEuOFYxMjZjMC0xLDAuOC0xLjgsMS44LTEuOGMxLDAsMS44LDAuOCwxLjgsMS44VjEzOC43eiIKCQkJLz4KCQk8cGF0aCBkPSJNMTYzLDBoLTYxLjNjLTguMywwLTE1LDYuNy0xNSwxNXYxNDhjMCw4LjMsNi43LDE1LDE1LDE1SDE2M2M4LjMsMCwxNS02LjcsMTUtMTVWMTVDMTc4LDYuNywxNzEuMywwLDE2MywweiBNMTI2LDE1LjMKCQkJaDEyLjdjMSwwLDEuOCwwLjgsMS44LDEuOGMwLDEtMC44LDEuOC0xLjgsMS44SDEyNmMtMSwwLTEuOC0wLjgtMS44LTEuOEMxMjQuMiwxNi4xLDEyNSwxNS4zLDEyNiwxNS4zeiBNMTE3LjMsMTUuMwoJCQljMSwwLDEuOCwwLjgsMS44LDEuOGMwLDEtMC44LDEuOC0xLjgsMS44cy0xLjgtMC44LTEuOC0xLjhDMTE1LjUsMTYuMSwxMTYuMywxNS4zLDExNy4zLDE1LjN6IE0xMzIuMywxNjkuOGMtNC40LDAtOC0zLjYtOC04CgkJCWMwLTQuNCwzLjYtOCw4LThjNC40LDAsOCwzLjYsOCw4QzE0MC4zLDE2Ni4zLDEzNi43LDE2OS44LDEzMi4zLDE2OS44eiBNMTcwLjUsMTQ1LjFjMCwwLjYtMC40LDEtMSwxSDk1LjFjLTAuNiwwLTEtMC40LTEtMVYzMi42CgkJCWMwLTAuNiwwLjQtMSwxLTFoNzQuNGMwLjYsMCwxLDAuNCwxLDFWMTQ1LjF6Ii8+Cgk8L2c+Cgk8cGF0aCBkPSJNNzYuMywyOC4yTDUxLjgsMjRsMi42LDcuMWMtMTYuMyw5LjUtMjcuOCwyNS45LTMxLjEsNDQuNGw5LjgsMS43YzIuNy0xNS4xLDExLjgtMjguNSwyNC43LTM2LjZsMi41LDYuOEw3Ni4zLDI4LjJ6Ii8+CjwvZz4KPC9zdmc+Cg==) center center no-repeat #fff;
        background-size: 15% auto;
    }

    body > *  {
        display: none!important;
    }
}



/* phone portrait */
@media screen and (max-width: 700px) {

}