部署网站直播。在小提琴中，Chrome / Phone / Safari中的一切都很好。现在在现场的东西搞砸了

Question

我完全被吹了，并且完全不知道如何解决这个问题。 到目前为止，我一直在JSFiddle开发一个网站模板。现在我有足够多的代码，我决定将它部署在我的一个旧托管上。我所做的只是将css，js和html保存到单独的文件中，然后将index.html中的css和js与jquery 2.0.2和jquery easing插件相关联。

//修改 Aight。 '身体{保证金：0; padding：0}'修复了导航栏问题。但它仍然完全搞砸了电话。有没有机会JSFiddle有一些“移动”措施？ 编辑结束//

//编辑2 全屏手机屏幕截图VS chrome的移动视图检查三星galaxy s3。 什么可能导致移动视图中的奇怪宽度和高度？ 编辑结束2 //

//编辑3 正如我所说，JSFiddle结果一切都很好。下面是Fiddle在手机上的样子截图。 JSFiddle必须有一些东西让它工作，这就是我在我的网站上所缺少的，这就是为什么它只会在那里混乱。小提琴的结果绝对完全响应，它只是在现场网站 编辑结束3 //

//编辑4 将<meta name="viewport" content="width=device-width">添加到头部，使情况更糟。 ：/ 编辑结束4 //

Here is the JSFiddle result当我在手机上打开此页面时，在Chrome或Safari中，一切都按预期工作。

The live site is here

在野生动物园中似乎是一样的。

但是在chrome中，导航由于某种原因离开了“左”8个像素，而没有在CSS中指定，我无法通过执行margin-left:-8px来解决这个问题，因为我在Chrome中错放了它。这里是那个图像

最后当我在Chrome浏览器中打开Android手机上的实时网站时，宽度完全搞砸了。

我是否遗漏了一些我在部署中无法重现的JSFiddle设置？ 如果有人愿意看看各种浏览器中的实时网站和小提琴，告诉我可能导致这些问题的原因，我会非常感激。

我期待你的回复。

Answer 1

默认情况下，padding设置为body。删除那个填充，你可以。

body {
    padding: 0;
    margin: 0;
}

---

这将解决您在手机上遇到的缩放问题。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">