Twitter bootstrap 为什么我的游戏在手机上测试时会显示桌面CSS？

因此，我试图做出响应，使某些元素在屏幕大小的断点处隐藏或重新排列，并一直通过干扰浏览器窗口的大小进行测试。问题是，当我在手机上测试时，一切都处于桌面模式，也就是说，我的媒体查询似乎都没有被应用。知道为什么吗

CSS:

---

顺便说一句，我的手机是诺基亚Lumia，Windows 8.1

头标签中有元视口吗？ 你能确认你的手机加载了你提供的css吗

---

也许我没有完全理解你的问题，但是当你说在你的手机上测试它时，你是指在实际的手机上还是从google dev tools中的设备列表中选择你的手机，因为如果它是第二个，那么你需要为每个大小重新加载页面，以便在页面上准确显示元素

头部标记中是否有元视口？ 你能确认你的手机加载了你提供的css吗

也许我没有完全理解你的问题，但是当你说在你的手机上测试它时，你是指在实际的手机上还是从google dev tools中的设备列表中选择你的手机，因为如果它是第二个，那么你需要为每个大小重新加载页面，以便在页面上准确显示元素

body { background: #000; color: #FFF;}
a.navbar-brand { font-size: 20px; }
h3 { font-size: 17px; }
p, li, td, a.btn-lg { font-size: 12px; }
h1:hover, h3:hover, p:hover, li:hover, td:hover { color: #19FF19; transition: color 0.5s; }
form[name="speedform"] table, form[name="speedform"] table td { border: 0; }
#snake-board-holder { width: 100%; border: 1px solid #FFF; background: url('/Content/images/grid.png'); background-size: cover; margin-top: 5%;}
#speed-form tr > td { border: 0; }
#the-modal { color: #000; }
    .modal-footer { margin-top: 0; }
    .modal-body > p { margin-bottom: 0; }
@media (min-width: 768px)
{
    #snake-cp-holder table tr > td:last-of-type { text-align: left; }
}
@media (max-width: 767px) {
 .game-column { margin-bottom: 5%; } 
 a.navbar-brand { font-size: 12px; }
 h3 { font-size: 18px; }
 thead h3 { text-align: center; }
 p, li, td, a.btn-lg { font-size: 14px; }
 .table-responsive { border: 0; }
 .table-responsive > .table { background: none; border: 0; } /* Override Bootstrap's giving the tables a white background on mobile devices */
 /*#snake-board-holder > svg { background: url(/Content/images/arrows-sphere.png); background-size: 100%; background-repeat: no-repeat; background-position: center center; opacity: 0.2; transition: opacity 1s ease;  }*/
}
@media (max-width: 479px)
{
    /* Rearrange/subtract elements for small mobile devices */
    .table-responsive { overflow-x: hidden; }
    .hide-under-480px { display: none;}
    #snake-cp-holder table tr > td:last-of-type { text-align: center; }
    #snake-scores-holder a.btn { display: block; margin: 0 auto; }
    #snake-scores-holder a.btn + a.btn { margin-top: 10px; }
}