Question

我的设计很好（它是一个带有旋转功能的圆形对象），带有元标记<meta http-equiv="content-type" content="text/html; charset=UTF-8">但是当我将该设计放入任何响应式模板时，它将无效。

我发现的原因是每个响应式模板e：g：bootstrap，foundation，skeleton等都使用metatag <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的路径可能不正确，因此引导程序js不起作用，这会导致切换菜单出现问题。

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

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

如果您在狭窄的视口上查看此布局，则布局会中断，因此也可能需要注意。具有响应式设计的iframe可能会使您的生活变得复杂，并且您也需要在此页面中添加视口元标记。

祝你好运！

如何在不使用metatag视口的情况下处理响应式设计？

3 个答案: