Javascript 响应CSS/引导：为小屏幕显示模式对话框，否则显示块元素

我有一个网页显示项目列表。当用户单击其中一个项目时，它会显示有关该项目的信息。对于一个移动用户，我希望它能显示一个弹出的模式对话框，并（几乎）填满屏幕——有很多信息要显示。对于桌面，我希望此信息显示在项目列表旁边

有没有人知道如何在设计时尽可能少地乱七八糟，最好使用尽可能少的样式使其与引导一起工作，最好使用最少的显式Javascript？我对媒体查询很熟悉，但除了复制粘贴bootstrap.css的大块内容外，我不知道该怎么做。

<a class="link" href="#">Toggle thingie</a>

<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

if (!('ontouchstart' in document.documentElement)) {
    // desktop
    $('#myModal').hide();
}

$('.link').on('click', function (e) {
    e.preventDefault();

    if ('ontouchstart' in document.documentElement) {
        // mobile or tablet: do modal thingie
        $('#myModal').modal('toggle');
    } else {
        // desktop
        $('#myModal').show();
    }
}

...
如果（！（document.documentElement中的“ontouchstart”）{
//桌面
$（'#myModal'）.hide（）；
}
$（'.link'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（'document.documentElement中的“ontouchstart”）{
//手机还是平板电脑：做模态思维
$（'#myModal'）.modal（'toggle'）；
}否则{
//桌面
$（'#myModal'）.show（）；
}
}

你能解释一下“ontouchstart”是什么意思吗？我不在乎用户是否有触摸屏，只在乎他们的屏幕大小。（我应该在问题中说得更清楚）。谢谢您的建议。document.documentElement中的“ontouchstart”正在检查设备是否支持刷卡，如果支持刷卡，则用户正在使用手机或平板电脑进行访问。如果只需要手机，请使用screen.width。