仅在移动设备上应用bootstrap

Question

我有一个遗留的网站，这不支持任何移动浏览器。这个网络有大量的CSS文件和外观＆amp;网络的感觉是不被修改的。 Bootstrap将用于使网络对移动用户做出响应。

问题是，我希望网络仅为移动浏览器应用引导程序。我们假设以下的html代码来自旧版网页，而且它没有响应。

＆＃13;

＆＃13;

<div id="header">
    <div><img src="view/image/logo.png"/></div>
    <div><img src="view/image/lock.png"</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果添加行和列类......

＆＃13;

＆＃13;

<div id="header" class="row">
    <div class="col-xs-6"><img src="view/image/logo.png"/></div>
    <div class="col-xs-6"><img src="view/image/lock.png"/></div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在，它对移动浏览器做出了响应，但是.row也会改变边距和范围。用于PC浏览器的#header填充，并非如此。所以，我想出了两个解决这个问题的方法。

1. 在@media下导入bootstrap。

   • 我认为这是不可能的，因为bootstrap已经有了自己的@media查询。另外，在@media下使用@media是完全无稽之谈。

2. 在加载bootstrap主题之前检测当前浏览器是在PC还是移动设备上。

   • 这是一个比＃1更好的解决方案，我无法解决它的任何缺点。

有没有其他方法可以解决这个问题？