Jquery 媒体查询和元视口都不工作

我正在创建一个博客模板，我想让它响应

我已经添加了视口

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

我试过了。它在我的桌面应用程序（chrome）上运行得很好。 但当我在移动设备上测试它时……它在平板电脑上也不起作用

然后我做了一些更改，并使用了不同的值

@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) {}

这确实有些帮助，但当我在更多的设备上测试时（iphone 6、6+、三星e7、摩托罗拉atrix 2、ipad3） 其中，它只在三星e7上起作用

然后我搜索了一些有响应的尺寸，发现使用的是像素比率而不是宽度

//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;),
{ }

这也是。。。没用。 后来我搜索了stackoverflow并尝试了这个..（文档中附加了jquery）

var isMobile=false//以虚假身份发起
//设备检测
若（安卓（安卓）bb\d+d+以及米耶去。若（若）若（若）若（若）若（安卓）若（若）若（若）若（若）若（安卓（安卓）bb\bb\d+d+以及MeGo前往）MeGo去。移动+移动+移动+移动+移动+移动+前去前去去去前去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去去Pucker | pocket | psp | series（4 | 6）0 | symbian | treo | up\（浏览器链接）|沃达丰| wap | windows（ce |电话）| xda | xiino/i.test（navigator.userAgent）
||1-6）1-6）1/7/12/12/12/12/12/12/12/12/7/12/12/12/12/12/12/7/12/12/12/12/12/12/12/10/12/12/12/12/12/12/12/12/12/12/12/12/12/12/10/12/12/12/12/12/7/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/10/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12/12（1244）s）的本币（1244）的本币（1244）的本币（1244）的本币（1244）的本币（a）的本币（a）的本币（a）的本币（s）的本币（s）的本币（1244）的本币（1244）的本币（1244）的本币）的本币（本币）的本币）的本币（本币）的本币（本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币）本币（本币）本| dica | dmob | do（c | p）o | ds（12 | \-d）el（49 | ai）|（4-7）0岁以上的学生（4-7）0岁以上的学生（4-7）0岁以上的学生（4-7）0岁以上的学生（4-7）0岁以上的学生（12-12岁）的学生（12-12岁）的学生（12-12岁）的学生（12-12岁）的学生（12-12岁）的学生（12-12岁）和（12-12岁）的学生（12-7）们（12岁）们（12-7）和（12-7）他们）的他们（12岁）们（12岁）他们）的学校学校（12岁）们（12岁）他们）的学生（12岁）们（12岁）们（12岁）们（12岁）的他们）的）的）们，他们（12岁）的）的学生（12岁，他们（12岁）的）会）的）的，他们（12岁）的）们（12岁，他们（12-12岁）的，他们（12岁）的）的知识产权（ip）1241244）门第三方——c（1244？|; 1244？よ;本币（ip）知识产权）门第三方——c（c（1244？1244？||||||;本币（ip）门第三方）门第三方——c（c（c（c）在场在场在场（c（本本币）a（1244）a）a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，a，跳汰机| kddi | keji | kgt（| \/）| klon | kpt | kwc | kyo（c | k）| le（no | xi）|本周（gよ除除了除了除了g（124本本）以外的其他一些（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币（g）本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本币）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本币（本）本）本）（1240）o-1240；v）本周四周四，o（1240）o（1240）本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周日（50）mwbp，本周日，My瓦瓦瓦瓦尼（1240-n10[0-0-0-0-0-0-2-0-0-2）n10[0[0-0-0-2-2-2-2-2-2-2-2-3）2-0[2-2-2-3）n20[2[2-2-2-2-2-3]本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四奥兰（owg1）p800（a | d | t）pdxg | pg（13 | \-（[1-8]| c））|菲尔|皮雷| pl本研究（1240岁岁，uc）的研究者们（1240岁岁，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本研究，本本周四，h \-1240 0 0 0 0 0 0 0 0 1）本周四，h \-1240 0本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本周四，本|50 | t6（00 | 10 | 18 | ta（gt | lk）| tcl \-| tdg \-|电话（i | m）|蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·蒂姆·托托托托（P（124）到（P |本）去（P | 12）去（P）去（70| m——m——m——m3~1244）m——m——m——m-5 5）m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m-m 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）
{
log（'您正在使用移动设备！'）；
$（'head'）。追加（''）；
}
其他的
{
log（'您没有使用移动设备！'）；
}

---

现在我不知道该怎么做…或者如何使网页响应。请帮助哇，你太复杂了！如果你想解决一个问题，就把它变成基本的，然后试着调试它，通过添加越来越多的代码，你只会让一个简单的错误变得复杂。试试这个，如果有什么事情发生，让我知道，我们可以从这里开始

@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%}}

---

谢谢你的回复，但在我尝试了你的方式之后。。。 和身体一样，每个装置的宽度分别只有30/40/50%

然后我又尝试了一次，它成功了，使我的站点响应：

@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){}

@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%}}

@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){}