为什么我在手机上测试游戏时显示桌面 CSS？答案

【问题标题】：Why is my game showing desktop CSS when I test it on my phone?为什么我在手机上测试游戏时显示桌面 CSS？
【发布时间】：2015-11-01 21:55:50
【问题描述】：

所以我试图让my game 响应，使某些元素在屏幕大小断点处隐藏或重新排列，并通过弄乱我的浏览器窗口的大小来测试它。问题是当我在手机上测试它时，一切都处于桌面模式，即我的媒体查询似乎都没有被应用。知道为什么吗？

CSS：

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; }
}

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

【问题讨论】：

标签： twitter-bootstrap css responsive-design media-queries

【解决方案1】：

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

也许我没有完全从您的问题中得到它，但是当您说在手机上测试时，您是指在实际手机上还是 oyu 从谷歌开发工具的设备列表中选择您的手机，因为如果它是第二个比您需要为每种尺寸重新加载页面以在页面上准确地表示元素。

【讨论】：