Neither media query nor meta viewport working

Question

i am creating a blogger template and i want to make it responsive...

i have added viewport already.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

what i have done so far is :

@media only screen and (min-width:768px) and (max-width:1023px){ having css code in btwn}
@media only screen and (max-width:767px){}
@media only screen and (max-width:479px){}

i tried this..it worked very well on my desktop application (chrome). but when i tested it on a mobile device ...it didn't worked neither on tablet.

then i made some changes , and used diff. values

@media only screen and (min-width:768px) and (max-width:1023px){}
@media only screen and (min-width:481px) and (max-width:767px){}
@media only screen and (min-width:320px) and (max-width:480px) {}

this did some help but when i tested it on some more devices( iphone 6, 6+, samsung e7, motorola atrix 2 ,ipad3) out of these , it worked only on samsung e7

then i searched some responsive sizes..and found to use pixel ratio rather than width..

//for tabs
@media 
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-width: 800px) and (max-device-width: 1280px),
    only screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332),
    only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5),
{

//For mobiles
@media 
    only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3),
    only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2),
    only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3),
    only screen and (min-device-width: 320px;),
{ }

this too... didn't worked. later i searched on stackoverflow and tried this..(attached jquery in document )

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

if(isMobile)
{
   console.log('You are using a mobile device!');
   $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
}
else
{
   console.log('You are not using a mobile device!');
}
</script>

now i don't know what to do...or how to make webpage responsive.please help

Answer 1

Wow, you over complicated things! If you are trying to solve an issue, make it basic and try to debug it, by adding more and more code you just start over complicating a simple bug. Try this, and let me know if anything happens and we can go from here

@media only screen and (max-width:1023px){ body{width: 50%}}
@media only screen and (max-width:767px){ body{width: 40%}}
@media only screen and (max-width:479px){ body{width: 30%}}

Answer 2

thanks for the reply but after i tried your way... as in body...the width in each device was only 30/40/50 % respectively...

then i tried it again and it worked and made my site reponsive:

@media only screen and (min-width:768px) and (max-width:1023px){}
@media only screen and (min-width:481px) and (max-width:767px){}
@media only screen and (min-width:320px) and (max-width:480px){}