时间戳

首页 > 解决方案 > 出现在移动 chrome 上的 html 标记之外的空白

html - 出现在移动 chrome 上的 html 标记之外的空白

问题描述

我的网站存在问题，其中空格在移动设备上的 HTML 标记边框之外呈现。该问题仅在移动设备上出现，当移动 chrome 浏览器在移动设备上设置为桌面模式时，也会发生同样的情况。

初始负载移动

这是网站最初在移动设备上加载的方式，但滚动超出了 HTML 标记的视口。

缩小

我不明白的是，如果客户端从纵向旋转到水平再返回，网站会删除空格。当我在所有网页上使用相同的静态模板时，问题在整个网站上仍然存在。

该网站是：Zefir.codes

网站用途：

下面是静态网页的模板：

<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <section class="section">
    <div class="container">
     <a href="index.html"> <h1 class="title animated pulse">
        Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
      </h1>
      <p class="subtitle animated bounceInRight">
        A <strong>Hacker's</strong> World
      </p>
      </a>
    </div>
  </section>
  <br/>
  <div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
  <ul>
    <li><a href="Tutorials.html">Tutorials</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="me.html">About me</a></li>
  </ul>
</div>
</div>
<br/>

<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Column start-->
<div class="columns">
<!--first Column-->
  <div class="column is-one-quarter">

  </br>
  <p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
  <header class="card-header">
    <p class="card-header-title">
     A rebirth of the website!
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
    </a>
  </header>
  <div class="card-content">
    <div class="content">
    The website is coming back and strong!

      <br>
      <time datetime="2020-05-15">22:04 - 15 May 2020</time>
    </div>
  </div>
</div>
</div>

  <!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
  <header class="card-header">
    <p class="card-header-title">No News
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
    </a>
  </header>
  <div class="card-content">
    <div class="content">...
      <br>
      <time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
    </div>
  </div>
</div>  <div class="card">
  <header class="card-header">
    <p class="card-header-title">No news    </p>
        <a href="#" class="card-header-icon" aria-label="more options">    </a>  </header>
        <div class="card-content">    <div class="content">... <br>
           <time datetime="2017-12-6">8:23 PM - 15 May 2020</time>    </div>  </div></div>

</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      <p>
        Zefir Repository is a collection of projects and tutorials by <strong><a href="https://www.linkedin.com/in/typicaljohan/">Jan Andersson</a></strong> Hosted on <strong>Infinityfree</strong>.
      </p>
    </div>
  </div>
</footer>
</div>
</body>
</html>

标签： htmlcssgoogle-chromewebmobile

解决方案

这样做是因为您的元素在动画开始之前被定位在右侧，并且浏览器保留了这个空白。要么改变你的动画，要么一个简单的修复是添加：

body {
  overflow-x: hidden;
}

推荐阅读