Html CSS赢得'；不要在手机浏览器上运行_Html_Css_Mobile

Html CSS赢得'；不要在手机浏览器上运行

html css mobile

Html CSS赢得'；不要在手机浏览器上运行,html,css,mobile,Html,Css,Mobile,我试着在电脑上创建一个网站，但当我在手机上打开网站时，id不会运行css 没有运行的css是一个带有三角形的css，用于传输到背景我尝试过搜索它，但对于多重情况似乎有不同的答案你可以在andrei-marin.com上查询我的网站正在运行 *编辑：它只运行谷歌浏览器和火狐浏览器，但不会在笔记本上的safari上运行！这是HTML： <!DOCTYPE html> <html lang="en" > <head> <meta charset

我试着在电脑上创建一个网站，但当我在手机上打开网站时，id不会运行css

没有运行的css是一个带有三角形的css，用于传输到背景

我尝试过搜索它，但对于多重情况似乎有不同的答案

你可以在andrei-marin.com上查询我的网站正在运行

*编辑：它只运行谷歌浏览器和火狐浏览器，但不会在笔记本上的safari上运行！这是HTML：

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Reveal content animation (and menu)</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>

      <link rel="stylesheet" href="./style2.css">


</head>

<body>

  <header>
  <div class="triangle left"><div class="typewriter"><h1>Andrei Marin</h1></div></div>
  <div class="triangle right"><div class="typewriter"><h1>Andrei Marin</h1></div></div>
  <button></button>
</header>

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Projects</li>
    <li>Contact</li>
  </ul>
  <div id="nav-close"><i class="fas fa-times"></i></div>
</nav>

<content>
  <section>Home</section>
  <section>About</section>
  <section>Projects</section>
  <section>Contact</section>
</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>



    <script  src="./script.js"></script>




</body>

</html>

这是JS：

// function to open/close nav
function toggleNav(){
  // if nav is open, close it
  if($("nav").is(":visible")){
    $("nav").fadeOut();
    $("button").removeClass("menu");
  }
  // if nav is closed, open it
  else{
    $("button").addClass("menu");
    $("nav").fadeIn().css('display', 'flex');
  }
}

// when clicking + or ☰ button
$("button").click(function(){
  // when clicking ☰ button, open nav
  if($("header").hasClass("open")){
    toggleNav();
  }
  // when clicking + button, open header
  else{
    $("header").addClass("open");
  }
});

// close nav
$("#nav-close").click(function(){
  toggleNav();
});

// scroll to sections
$("nav li").click(function(){
  // get index of clicked li and select according section
  var index = $(this).index();
  var target = $("content section").eq(index);

  toggleNav();

  $('html,body').delay(300).animate({
    scrollTop: target.offset().top
  }, 500);
});

尝试清除手机上浏览器的数据。它工作正常，可能是浏览器没有重新加载CSS的问题。您还可以临时更改样式表URL，以便强制浏览器再次获取它

看起来更像是你的设备出了问题。同样，在chrome中，在网络设置中尝试

F12

和

禁用缓存

，并尝试使用移动设备预设进行查看。

问题不是这样，主屏幕工作正常，但如果你点击按钮，它将不会带你进入页面。。试着在电脑上按一下按钮，看看会发生什么，然后试着在电话里说：）有人知道如何解决这个问题吗？

// function to open/close nav
function toggleNav(){
  // if nav is open, close it
  if($("nav").is(":visible")){
    $("nav").fadeOut();
    $("button").removeClass("menu");
  }
  // if nav is closed, open it
  else{
    $("button").addClass("menu");
    $("nav").fadeIn().css('display', 'flex');
  }
}

// when clicking + or ☰ button
$("button").click(function(){
  // when clicking ☰ button, open nav
  if($("header").hasClass("open")){
    toggleNav();
  }
  // when clicking + button, open header
  else{
    $("header").addClass("open");
  }
});

// close nav
$("#nav-close").click(function(){
  toggleNav();
});

// scroll to sections
$("nav li").click(function(){
  // get index of clicked li and select according section
  var index = $(this).index();
  var target = $("content section").eq(index);

  toggleNav();

  $('html,body').delay(300).animate({
    scrollTop: target.offset().top
  }, 500);
});