html - 网站仅在移动设备上加载一半
问题描述
我目前正在为客户制作即将推出的页面。当我尝试在移动设备上输入网页时,只有一半的页面加载。
nelsee.net 是网站。
这是我的代码。
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Karla');
@import url('https://fonts.googleapis.com/css?family=Work+Sans');
body {
background: url("https://images.pexels.com/photos/1106433/pexels-photo-1106433.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Work Sans', sans-serif;
color: white;
}
.header {
text-align: center;
margin-top: 12em;
}
.content {
text-align: center;
margin-top: 6em;
}
.content h3 {
margin-top: 2em;
}
#demo {
font-size: 50px;
margin-top: 40px;
}
.footer {
position: fixed;
left: 0;
bottom: 70px;
width: 100%;
text-align: center;
}
.footer p {
text-transform: uppercase;
}
.footer a {
text-decoration: none;
color: white;
}
.social-icons {
margin-top: 2em;
display: flex;
flex-direction: row;
justify-content: center;
}
.social-icons a {
text-decoration: none;
margin: 10px;
}
@media only screen and (max-width: 600px) {
.footer {
margin-top: 7em;
position: relative;
}
.header {
margin-top: 7em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!--FontAwesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!--Custom CSS-->
<link rel="stylesheet" href="css/style.css">
<!--Custom Scripts-->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<!--ICO-->
<link rel="shortcut icon" href="imgs/icon.png" />
<!--Title-->
<title>Coming Soon</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="header">
<h1>nelsee.net</h1>
</div>
<div class="content">
<h3>We are currently working on our full website.</h3>
<p id="demo"></p>
</div>
<div class="footer">
<p>follow us:</p>
<div class="social-icons">
<a href="https://www.facebook.com/profile.php?id=100000077515899"><i style="font-size: 2em;" class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/nsstoilova/"><i style="font-size: 2em;" class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
首先我认为这是因为视口元,所以我尝试改变它。
它可能与引导容器有关?
我会添加一个代码笔,但我懒得这样做:D
Alsoo..如果您运行stackoverflow代码段,您将看到它在横向移动模式下的样子..有什么方法可以解决这个问题吗?
解决方案
推荐阅读
- python - Python中的这些类有什么区别?
- c++ - 为什么微软在新代码中使用结构而不是类?
- java - 使用 Java 中的反射以特定方式打印带有参数的方法
- c++ - C ++“错误:重载运算符'*'的使用不明确”似乎只有一个匹配项
- elasticsearch - Elasticsearch 在双引号之外标记化
- string - Kotlin - 是否有一个基本函数可以用引用字符串中的多个字符串替换多个字符串?
- python - Visual Studio Code 语法突出显示不起作用
- terraform - 如何在terraform中将列表输入传递给aws vpc elb
- laravel - 使用 laravel 护照创建密码授予令牌时出现 401 Unauthorized
- asp.net-core - 在授权中间件中从正文中获取数据