jquery - 现场部署的网站。在 Chrome/Phone/Safari 中，一切都很好。现在现场直播的东西一团糟

Question

我完全被震惊了，完全不知道如何解决这个问题。到目前为止，我一直在用 JSFiddle 开发网站模板。现在我已经有了足够多的代码行，我决定将它部署在我的一个旧主机上。我所做的只是将 css、js 和 html 保存到单独的文件中，然后将 index.html 中的 css 和 js 与 jquery 2.0.2 和 jquery easing 插件链接起来。

//编辑好吧。 '正文{边距:0； padding: 0 }' 修复了导航栏问题。但它仍然完全搞砸了电话。 JSFiddle 是否有机会采取一些“移动”措施？编辑结束//

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

//EDIT 3 正如我所说的那样，JSFiddle 结果绝对没问题。下面是 Fiddle 在手机上的截图。 JSFiddle 上必须有一些东西才能让它工作，这就是我现在在我的网站上所缺少的，这就是为什么它只在那儿搞砸了。 fiddle 的结果绝对是完美的响应，它只是在实时网站上胡扯 编辑结束 3//

//编辑 4添加 <meta name="viewport" content="width=device-width">进入头部，使情况变得更糟。 :/编辑结束 4//

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

The live site is here

safari里好像也一样

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

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

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

期待您的回复。

Answer 1

默认情况下，填充设置为正文。删除该填充，您可以。

body {
    padding: 0;
    margin: 0;
}

---

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

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