如何在不使用元标签视窗的情况下处理响应式设计？

Question

我的设计使用元标签<meta http-equiv="content-type" content="text/html; charset=UTF-8">工作得很好(它是一个具有旋转功能的圆形对象)，但是当我将这个设计适合任何响应式模板时，它就不会工作了。

我发现的原因是每个响应式模板都使用元标签<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://prefortune.com/rotate/bootstrap/

你可以点击响应模式下的changeview链接，在上面的链接上，它会改变视图，圆圈设计将会合适，但切换菜单将会丢失。(单击时，我正在删除视口元标记内容的内容。)

Answer 1

我只是注意到一些有趣的事情，并想分享它，也许它会对某人有所帮助。在站点标头部分，您应该首先包含bootstrap.css，然后才包含bootstrap-responsive.css，因为显然responsive.css依赖于bootstrap.css

当然，元标签也应该存在。

 Error Code
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

如果你使用的是Bootstrap，你可以试试这个。

<div class="embed-responsive embed-responsive-16by9">
 <iframe class="embed-responsive-item" src="..."></iframe>

​

Answer 3

从HTML的第315行开始，您将看到

<!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>  

在我看来，这个到jquery的路径可能不正确，因此bootstrap js无法工作，这会导致切换菜单出现问题。

这可能不是你所有问题的完整答案，但这是一个很好的起点。

我注意到的另一个问题是iframe的源文档没有响应：http://prefortune.com/rotate/

如果在狭窄的视口中查看此视图，则布局会中断，因此可能还需要注意这一点。具有响应式设计的Iframes可能会使您的生活复杂化，首先，您还需要向此页面添加一个viewport meta标签。

祝好运!