Question

我的网站（www.acweb.com.cy）在显示屏幕右上角的导航栏时出现问题。当它在768px的宽度上调整大小时，它显示＆＃34; js-fh5co-nav-toggle fh5co-nav-toggle＆＃34;和常规导航栏，它是较大屏幕的水平。所以当它在我的小型ipad上打开时会显示两个导航栏。

关闭所有我不太了解sass并使用koala程序编辑模板scss文件。另外，我从scss文件名中删除了所有_（下划线），因为考拉不会读取文件。最后，当我加载网站并在firefox中打开开发人员检查器时，导航栏被读为_navbar.scss而不是navbar.scss，因为我重命名了它。

感谢您的帮助!!

Answer 1

所以当它在我的小型ipad上打开时会显示两个导航栏。

iPad的像素密度与普通计算机显示器不同，这在使用css媒体查询时可能会让人感到困惑，甚至可能会让你css认为它完全不同media query。

我建议您查看此网站，以了解为什么您的iPad展示了与桌面/笔记本电脑不同的网站：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

有关像素密度的详细信息，特别是Apple的Retina显示屏，您需要这样做：https://en.wikipedia.org/wiki/Retina_Display

Answer 2

您的响应式媒体查询代码在某些地方发生冲突，您需要更正它。这就是navbar 768px to 765px中max-width可见的原因。

这就是您min-width和@media screen and (min-width: 768px){ ....... ..... } @media screen and (max-width: 768px){ ....... ..... }目前的情况，如下所示

@media screen and (min-width: 769px){
.......
.....
}
@media screen and (max-width: 768px){
.......
.....
}

您需要增加或减少宽度中的任何一个。您可以进行如下更改，

func startRecording(){
        mSession = AVCaptureSession()
        mSession?.sessionPreset = AVCaptureSessionPresetHigh
        let displayId : CGDirectDisplayID = CGMainDisplayID()

        let session : AVCaptureSession
        if mSession != nil {
            session = mSession!
        }else{
            return
        }

        let input : AVCaptureScreenInput = AVCaptureScreenInput(displayID: displayId)
        input.minFrameDuration = CMTimeMake(1, 35)
        if let rect = delegate?.cropRect() {
            input.cropRect = rect
        }

        if session.canAddInput(input) {
            session.addInput(input)
        }else{
            return
        }

        mMovieFileOutput = AVCaptureMovieFileOutput()

        if session.canAddOutput(mMovieFileOutput) {
            session.addOutput(mMovieFileOutput!)
        }

        mSession?.startRunning()
        mMovieFileOutput?.movieFragmentInterval = kCMTimeInvalid
        mMovieFileOutput?.startRecording(toOutputFileURL: URL(fileURLWithPath:"/Users/Tester/Desktop/capture.mov"), recordingDelegate: self)

    }

Answer 3

快速解决方法 （不是最佳解决方案）

在main.js文件的底部，在所有其他方法之后添加此行：

$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');

这样你的功能就是：

// Document on load.
$(function(){

    parallax();

    burgerMenu();

    clickMenu();

    windowScroll();

    navigationSection();

    goToTop();


    // Animations
    homeAnimate();
    introAnimate();
    workAnimate();
    testimonialAnimate();
    servicesAnimate();
    aboutAnimate();
    countersAnimate();
    contactAnimate();

    $('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});

当它们都用于导航时，这将删除普通类。

两个导航栏显示在错误的断点上

3 个答案: