我的代码现在有 2 个问题:
1) 我实际上是在为一些 div 使用动画。动画在桌面上是完美的，但在移动设备上使用时页面会向上移动一点。
2) 我正在使用 AJAX 从我的数据库中检索一些信息，唯一的问题是当
中的文本太多时，文本不会中断并在新行中继续, 而不是放大页面
我用我正在使用的所有代码创建了一个 JSFiddle。
对于第一个问题，我无法使用 JSFiddle 重现问题，但代码与我的网站相同并且出现错误，也许您可以找到它。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Cerca il personal trainer perfetto per te">
<meta name="author" content="Davide">
<title>Find your PT</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body id="page-top">
<section class="page-section pb-5 text-center text-white" id="services">
<div class="container-fluid" id="slideInRight">
<div class="container">
<h1>Sei in cerca di un PT?</h1>
<p class="font-weight-light">Potrai entrare in contatto con il personal trainer perfetto per te. Inizia subito il tuo percorso verso il corpo dei tuoi sogni</p>
<button id="signInAsUser" type="button" class="btn btn-dark loginService">Iscriviti come cliente</button>
</div>
</div>
<div class="container-fluid" id="slideInLeft">
<div class="container">
<h1>Sei un PT in cerca di clienti?</h1>
<p class="font-weight-light">Potrai offrire le tue conoscenze tecniche agli utenti, aiutandoli a raggiungere i propri obiettivi</p>
<button id="signInAsPt" type="button" class="btn btn-danger loginService">Iscriviti come PT</button>
</div>
</div>
</section>
<section id="reviews" class="border-bottom">
<div class="row">
<div class="col"><hr></div>
<div class="col-auto"><h3>Recensioni</h3></div>
<div class="col"><hr></div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner h-100" id="reviewList">
<div class="carousel-item active">
<div class="carousel-caption">
<p class="text-danger"><strong><em> PT: <a href="#" class="linkToPt" data-id="1">Fanto</a></em></strong></p>
<h5>askldnaksdn laskndlasn dlaknslkndalksndlasnl k</h5>
<p>asldknasldknalksdnkalsndklasndlansdklansldknaklsdnalksdnklanlansldkansldknaklsndkalsndlkdnasnkldasnklasdnkldnklaasdnklasdnklnklasdasdnklasdnklasdnklasdnklnklasdasdnklasdnkllnd</p>
<p>4</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="page-section p-5" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="font-weight-bold">Hai bisogno di aiuto?</h2>
<p class="font-weight-lighter">Hai problemi a visualizzare il sito web? Non riesci a metterti in contatto con nessun Personal Trainer?
Inviaci un email e ti risponderemo il prima possibile!</p>
</div>
</div>
</div>
</section>
</body>
</html>
window.onbeforeunload = function () {
if(window.scrollTo) window.scrollTo(0,0);
};
$(document).ready(function() {
$(window).scroll( function() {
var top_of_element = $("#slideInRight").offset().top;
var bottom_of_element = $("#slideInRight").offset().top + $("#slideInRight").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
$('nav').toggleClass('scrolled', $(this).scrollTop() > ($( window ).height() - $(".navbar").height() * 2));
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
if ($("#slideInRight").hasClass("toLeft")) {} else {
$("#slideInRight").addClass("toLeft");
}
if ($("#slideInLeft").hasClass("toRight")) {} else {
$("#slideInLeft").addClass("toRight");
}
}
$('.hideme').each(function (i) {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
$(this).animate({'opacity': '1'}, 500);
}
});
});
});
$('#reviewList').on('click', '.linkToPt', function() {
localStorage.setItem("ptId", $(this).data("id"));
window.location.href = location.origin + "/../php/view/profile.html";
});
$('#signInAsPt').click(function () {
window.location.href = location.origin + "/php/view/loginSignup.html?checked=1";
});
$('#signInAsUser').click(function () {
window.location.href = location.origin + "/php/view/loginSignup.html?checked=0";
});
/* General */
html {
height: 100%;
}
body{
height: 100%;
overflow-x: hidden;
}
/* Navbar */
.navbar-default{
transition:100ms ease;
background: #0000003b;
}
.navbar-default.scrolled{
background:#000;
}
/* Login Menu Animation*/
@media (min-width: 992px) {
.animate {
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform:translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
100% {
-webkit-transform: translateY(0);
}
0% {
-webkit-transform: translateY(1rem);
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
/* Full Screen Image */
.masthead {
height: 100vh;
min-height: 500px;
background: linear-gradient(to bottom,rgba(105,105,105,.8) 0,rgba(0,0,0,1) 100%),url(../img/bg-masthead.jpg) !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Reviews */
.carousel{
margin-top: 50px;
height: 250px;
}
.carousel-inner{
height: 100%;
}
.carousel-caption{
color: black !important;
top: 50%;
}
.carousel-control-next, .carousel-control-prev{
color:black !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}
/* Animation */
.hideme{
opacity:0;
}
/* Diagonal Divs + animation*/
.container-fluid {
width: 100%;
padding: 8rem 0;
}
.toLeft {
background: #b31c2a;
transform: skewY(-2deg);
animation: enterFromRight 0.5s ease-in-out;
}
.toLeft .container {
transform: skewY(2deg);
}
.toRight {
background: black;
transform: skewY(2deg);
animation: enterFromLeft 0.5s ease-in-out;
}
.toRight .container {
transform: skewY(-2deg);
}
@keyframes enterFromLeft {
from {
margin-left: -90%;
}
to {
margin-left: 0;
}
}
@keyframes enterFromRight {
from {
margin-left: 90%;
}
to {
margin-left: 0;
}
}
这是链接:[JSfiddle]: https://jsfiddle.net/cha50tej/2/
最佳答案
对于文本问题，尝试为 p 标签添加 word-break: break-all。这应该会导致文本换行。
关于html - 移动设备上的 Css 动画向上移动页面并且 <p> 标签内的文本不会换行而是放大页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57224055/