Fatal编程技术网
  • javascript/
  • Javascript CSS在重新加载手机时中断

Javascript CSS在重新加载手机时中断

javascript jquery html css

Javascript CSS在重新加载手机时中断,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不太擅长CSS。我的网站有4个样式表和3个JS文件，使用Bootstrap4和jQuery。当我在live上部署它并刷新页面时，一切正常 然而，当我从手机上访问网站时，它第一次运行良好，但当我刷新时，所有的CSS和HTML都被破坏（这通常发生在第一次或第二次刷新之后）。在它被破坏后，我刷新它一两次，它修复了问题。我搜索了一下，有人说这是因为使用了相对定位和浮动，但是当我从CSS文件中注释掉这些行时，我仍然有同样的问题。有人知道如何解决这个问题吗 索引html ** Landor应用程序 嗨，

我不太擅长CSS。我的网站有4个样式表和3个JS文件，使用Bootstrap4和jQuery。当我在live上部署它并刷新页面时，一切正常

然而，当我从手机上访问网站时，它第一次运行良好，但当我刷新时，所有的CSS和HTML都被破坏（这通常发生在第一次或第二次刷新之后）。在它被破坏后，我刷新它一两次，它修复了问题。我搜索了一下，有人说这是因为使用了相对定位和浮动，但是当我从CSS文件中注释掉这些行时，我仍然有同样的问题。有人知道如何解决这个问题吗

索引html

**


Landor应用程序
嗨，安德鲁，

我们迫不及待地欢迎你来到伦敦。
在此之前，请花几分钟时间
（3，确切地说）探索更多关于我们的信息…

当做
彼得


进来
简介.css
html{
身高：100%；
}
.简介文本{
字体系列：“apercuBold”；
}
#介绍页{
左侧填充：20px；
右边填充：20px；
}
身体{
背景色：黑色；
}
.容器液体{
右边填充：10px；
左侧填充：10px；
}
.简介文本{
位置：相对位置；
最高：5%；
}
#输入按钮{
字体系列：“timeposRegular”；
文字装饰：下划线；
字体大小：150%；
光标：指针；
位置：相对位置；
最高：20%；
}
.简介标题{
垫面：3%；
}
.简介文本{
填充顶部：50px；
填充底部：50px；
}
#世界地标{
内容：url（“../assets/Landor_Logo.png”）；
宽度：120px；
高度：30px；
}
.介绍船{
内容：url（“../assets/boat2.png”）；
最大宽度：400px；
高度：自动；
浮动：对；
}
@媒体屏幕和屏幕（最大宽度：450px）{
.介绍文字>h3{
字体大小：100%；
}
.简介文本{
字体大小：100%；
线高：1.4；
填充顶部：30px；
填充底部：30px；
}
#输入按钮{
字体大小：100%；
}
.介绍船{
最大宽度：200px；
高度：自动；
浮动：对；
}
.简介标题{
垫面：5%；
}
}
@媒体屏幕和屏幕（最大宽度：350px）{
.intro text>h4{
字体大小：90%；
}
.简介文本{
字体大小：94%；
线高：1.1；
填充顶部：30px；
填充底部：30px；
}
#输入按钮{
字体大小：94%；
}
.介绍船{
最大宽度：200px；
高度：自动；
}
.简介标题{
垫面：5%；
}
}
.介绍页脚{
位置：固定；
底部：10%；
宽度：100%；
}
**

我刚拔出手机去了网站，使用了浏览器工具手机模拟器选项（我不知道它叫什么），重新加载时看起来很好。可能尝试重新启动手机或清除缓存

是因为您倾斜手机并从水平和垂直方向切换视图（这仍然不会改变任何内容）

一整天之后，我终于通过在链接标签的样式表路径末尾添加“？”解决了这个问题。这是一个缓存问题，尽管我禁用了缓存，但由于某些原因它不起作用。现在我刷新页面>10次，从未遇到任何问题！我认为，由于有一个问号，当它加载CSS时，首先要检查是否有另一个版本可以阻止它从缓存中完全提取。

请提供一个链接。当你在移动设备上刷新时，你会看到CSS的变化：其中一部分是最小的。请创建再现问题所需的最少代码，并将其包含在帖子中。谢谢。但是，如果你刷新一两次，你会看到内容和船的图像会粘在黄页的最右边。它的左右两侧都有衬垫。然而，当你刷新时，右边的填充消失了，它们都移到了页面的最右边。你要我把它录下来吗？对我来说绝对没有什么改变。。。你重启手机并清除缓存了吗？测试手机的人也有同样的问题。我们都在使用IOS。如上所述，当我刷新页面时，我们在第一次或第二次刷新时会遇到相同的问题。我重启了电话，但没用。有趣的是，当我复制链接并在另一个选项卡中打开时。我没有任何问题。该问题仅在刷新时发生。您正在使用ios设备吗？（这个问题发生在ios上的chrome和safari上）。当然，如果你能录制，那将非常有帮助。非常感谢你！！！我在这里用的是iphone5ssame。我不知道你为什么没有这个问题 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Landor App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
    <link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
    <link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
    <link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>  
    <link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
    <link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>

</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
    <div class="row intro-header">
        <div class="col-12"><img id="landor-worldmark"></div>
    </div>
    <div class="row intro-text">
            <div class="intro-text col-12">
                <h3>Hi Andrew,</h3><br>
                <h3>We can't wait to welcome you to Landor London.
                 Until then please take a few minutes
                 <span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
                <h3>Regards,</h3>
                <h3>Peter</h3><br><br>
                <span id="enter-button">Enter</span>        
            </div>          
    </div> 
    <div class="intro-footer row">
            <div class="col-12"><img class="img-fluid intro-boat"></img></div>
    </div>      
</div>
intro.css
html {
  height: 100%;
}
.intro-text{
   font-family: "apercuBold"; 
}
#intro-page{
  padding-left: 20px;
  padding-right: 20px;
}
body {
  background-color:black;
}
.container-fluid{
  padding-right: 10px;
  padding-left: 10px;
}
.intro-text{
  position: relative;
  top: 5%;
}
#enter-button{
  font-family: "timeposRegular"; 
  text-decoration: underline;
  font-size: 150%;
  cursor: pointer;
  position: relative;
  top: 20%;
}
.intro-header{
  padding-top: 3%;
}
.intro-text{
    padding-top: 50px;
    padding-bottom: 50px;
}
#landor-worldmark{
  content:url("../assets/Landor_Logo.png");
  width: 120px;
  height: 30px;
}
.intro-boat{
  content:url("../assets/boat2.png");
  max-width: 400px;
  height: auto;
  float:right;
}
@media screen and (max-width: 450px) {
  .intro-text > h3{
     font-size: 100%;
  }
  .intro-text{
      font-size: 100%;
      line-height: 1.4;
      padding-top: 30px;
      padding-bottom: 30px;
  }
  #enter-button{
     font-size: 100%;
  }
  .intro-boat{
    max-width: 200px;
    height: auto;
    float:right;
  }
  .intro-header{
    padding-top: 5%;
  }
}
@media screen and (max-width: 350px) {
  .intro-text > h4{
     font-size: 90%;
  }
  .intro-text{
      font-size: 94%;
      line-height: 1.1;
      padding-top: 30px;
      padding-bottom: 30px;
  }
  #enter-button{
     font-size: 94%;
  }
  .intro-boat{
    max-width: 200px;
    height: auto;

  }
  .intro-header{
    padding-top: 5%;
  }
}
.intro-footer{
  position: fixed;
  bottom: 10%;
  width: 100%;
}