2

几天来，我一直在尝试用 broswersync 解决这个问题。对此的任何帮助将不胜感激。

我的环境：

我在 Windows 上，我在 Ubuntu 上的服务器在一个流浪者的盒子里。我开启了端口转发，并使用端口 3000 映射到我的 vagrant 上的端口 3000。所以我从主机使用的 URL 是http://localhost:3000/index.html，如果来自外部，那么http://MY_IP_ADDRESS:3000/index.html

描述：

我有 CSS 注入、重新加载、表单同步、点击，可以在所有浏览器和设备上工作。不起作用的是同步滚动，下面是场景。

  1. 滚动同步仅适用于 chrome，在桌面模式下，即，如果我在桌面模式下的多个窗口中的 chrome 中打开相同的 URL，它可以正常工作。
  2. 如果我打开移动模式，在 chrome 和桌面模式下，滚动同步不起作用。
  3. 如果我在 firefox、safari、IE 上打开链接，滚动同步在它们之间不起作用。
  4. 我无法通过在多个设备上打开链接来滚动浏览不同的设备和浏览器。

我的咕噜：

我在 Windows 上工作，但我的服务器在 vagrant/ubuntu 上。这是我用于浏览器同步和观看的 Gulp 配置。

// Static server
gulp.task('browser-sync', function () {
        browserSync({
                server: {
                        baseDir: "www"
                },
                ghostMode: {
                        scroll: true
                }
        });
});
// Static Server + watching scss/html files
gulp.task('serve', ['scss'], function () {

        browserSync({
                server: "./www"
        });
        gulp.watch(paths.scss, ['scss',browserSync.reload]);
        gulp.watch(paths.html, ['html',browserSync.reload]);
        gulp.watch(paths.js, ['js',browserSync.reload]);
        //gulp.watch("*.html").on('change', reload);
});

提前感谢您的帮助..

4

3 回答 3

11

我最近也遇到了这个问题。我发现我的问题是没有 html5 文档类型。

您的页面上有 html5 文档类型吗？如果没有，请尝试添加一个。

<!DOCTYPE html>

于 2015-06-17T22:55:07.860 回答
0

我也偶然发现了这个问题。当我在我的机器上访问http://localhost:3000的 URL 并从我的设备访问 http://MY_LOCAL_IP:3000时，同步将无法工作。不仅是滚动，还有点击和动作。我试图从http://localhost:3001（BS UI，一个很好的附加 IMO）更改设置，但它仍然无法正常工作。

这是我的 BS 任务：

gulp.task('browser-sync', ['default'], function() {
  browserSync({
    server: {
      baseDir: './app'
    }
  });
});

然后我尝试从我的机​​器和设备访问http://MY_LOCAL_IP:3000 ，它按预期工作。希望这可以帮助 ;）

于 2015-04-22T04:30:42.917 回答
0

我自己也遇到过这个问题。Drew关于导致问题的缺少 HTML5 doctype 的回答让我查看了自己的 doctype。

我的 doctype 在那里，但我在 HTML 标签上有一个类。删除此类为我恢复了滚动同步。重新添加课程会破坏同步。

值得一提的是，这个问题似乎只有在手动将类添加到 HTML 标签时才会出现。通过 DOM 操作（例如使用 Modernizr）添加的任何类都不会破坏滚动同步。

运行 BrowserSync 版本 2.13.0，这是目前的最新版本。

于 2016-06-22T00:35:23.260 回答