网页部分背景在移动设备上被切断

Question

我正在尝试从头开始构建一个网站，作为网络和 job/school 应用程序的在线简历。我是 html 和 css 的新手，大约 5 个月前才开始使用。在大多数情况下，一切都进行得很好。唯一的问题是，在移动设备上，我页面上各部分的背景在我希望它们拖到屏幕末尾（右侧）的地方被截断。在桌面上，它看起来还不错。任何帮助或建议将不胜感激。我有点不知所措。

这是我页面上的 HTML 和 CSS：

:root {
  --border: 1px solid white;
  --noborder: none;
  --light: #262933;
  --dark: #23242c;
}

body {
  background-color: var(--dark);
  color: white;
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.section-segmenter:nth-child(even) {
  background-color: var(--light);
  position: relative;
  left: 0;
  right: 0;
  z-index: 0;
  padding: 15px;
}

@media only screen and (max-width:600px){
    .section-segmenter:nth-child(even){
        background-color: var(--light);
        position: relative;
        left: 0;
        right: 0;
        z-index: 0;
        padding: 15px;
        width: 1300px;
    }
}

.section-segmenter:nth-child(odd) {
  padding: 15px;
}

h1,
.section-title {
  font-size: 2.24rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}

h2 {
  font-size: 1.5rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
  color: rgba(255, 255, 255, .54)
}

a {
  text-decoration: none;
  color: #fd5961;
}

a:hover {
  text-decoration: none;
  text-decoration: underline;
}

.icon-params {
  color: #fd5961;
  font-size: 30pt;
  padding: 4px;
}

a.icon-params:hover {
  font-size: 300%;
  text-decoration: none;
  color: #fd5961;
}

.text-muted {
  color: rgba(255, 255, 255, .54)
}

.middot-divider::after {
  content: '[=10=]B7';
}


/*#region Navigation Table*/

#nav-table {
  border: 0px solid black;
  border-collapse: collapse;
  margin-top: 15px;
  width: 1300px;
}

#navbar a {
  display: block;
  background-color: #333;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: normal;
  font-size: 26px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

#navbar a:hover {
  background: #ddd;
  color: black;
}


/* #endregion Navigation Table*/


/* #region Personal Bio*/

.bio {
  padding-top: 30px;
  /*padding-bottom: 300px;*/
}

#avatar {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

#bio-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
}

#bio-table th {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  padding: 10px;
  height: 350px;
  word-break: break-word;
}

#bio-table td {
  border: var(--noborder);
  border-collapse: collapse;
  font-weight: normal;
  font-size: 19px;
  line-height: 28px;
  padding: 10px;
  padding-top: 0px;
  vertical-align: top;
}


/* #endregion Personal Bio*/


/* #region Skills*/

#skills-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
}

#skills-table th,
#skills-table td {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  width: 5.3%;
  padding: 15px;
  word-break: break-word;
}

.skills-icons {
  color: #fd5961;
  font-size: 5rem;
  text-decoration: none;
}

.skills-label {
  color: #fd5961;
}


/* #endregion Skills*/


/* #region Experience*/

#experience {
  padding: 60px;
}

#experience-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
}

#experience-table th {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  padding: 15px;
  word-break: break-word;
}

#experience-table td {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  padding: 15px;
  word-break: break-word;
}


/* #endregion Experience*/


/* #region Featured Publications & Presentations*/

#publications {
  padding: 60px;
}

#publications-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
}

#publications-table th {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 30px;
  padding: 15px;
  word-break: break-word;
  font-family: Arial, Helvetica, sans-serif;
}

#publications-table td {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 30px;
  padding: 15px;
  word-break: break-word;
  font-family: Arial, Helvetica, sans-serif;
}


/* #endregion Pub &Pres*/


/* #region Projects*/

#projects-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
}

#projects-table th {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  padding: 15px;
  word-break: break-word;
}

#projects-table td {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  padding: 15px;
  word-break: break-word;
}


/* #endregion Projects*/


/* #region Contact Info*/

#contact-table {
  border: var(--noborder);
  border-collapse: collapse;
  padding: 20px;
  width: 1200px;
  font-family: Arial, Helvetica, sans-serif;
}

#contact-table th,
#contact-table td {
  border: var(--noborder);
  border-collapse: collapse;
  /*float: left;*/
  text-align: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 65px;
  width: 17.3%;
  padding: 10px;
  word-break: break-word;
  vertical-align: top;
}

.contact a {
  color: #fd5961;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
}

.contact-icon {
  font-size: 1.7em;
}


/* #endregion Contact Info*/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Personal Website</title>
  <link rel="stylesheet" type="text/css" href="personal-website.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" integrity="sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha256-FMvZuGapsJLjouA6k7Eo2lusoAX9i0ShlWFG6qt7SLc=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">
  <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  <link rel="icon" href="images/tab-icon/favicon-32x32.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>



  <!-- #region Navigation Table-->
  <table id="nav-table" align="center">
    <thead>
      <tr id="navbar">
        <th><a href="index.html">Home</a></th>
        <th><a href="#publications">Publications</a></th>
        <th><a href="projects.html">Projects</a></th>
        <th><a href="#contact">Contact</a></th>
        <th><a href="files/name_CV.pdf">CV</a></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="5">
          <img src="images/headerImage.png" alt="header image" width="1300" class="center">
        </td>
      </tr>
    </tbody>
  </table>
  <!-- endregion Navigation Table -->
  <br><br><br><br>


  <!-- #region Personal Bio-->
  <section class="bio section-segmenter" id="bio">

    <table id="bio-table" align="center">
      <thead>
        <tr>
          <th style="text-align: center;">
            <img id="avatar" src="images/Geolytes/Geolyte1.png" alt="headshot">
            <br>
            <span class="section-title" style="font-size: 1.44rem;">
                            Name<br>
                        </span>

            <span class="text-muted">

                            Job Title<br>
                            Institute

                        </span>

          </th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th width="815" colspan="3">
            <span class="section-title">Biography</span>
            <br><br> text text text text text text text text text text text text text text text text text text text text text text text text text text. text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text. text text text text text text text text text text <a href="link2page" target="_blank" rel="noopener">Link 1</a> at <a href="link2page"
              target="_blank" rel="noopener">Link 2</a>. text text text text text text text text text text text text text text text text text text text text text. text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text. text text text text text text text text text text text text text text text text text text text text text text text.
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;">
            <a class="icon-params" href="mailto:mymail@gmail.com">
              <i class="fas fa-envelope"></i>
            </a>

            <a class="icon-params" href="link2page" target="_blank" rel="noopener">
              <i class="fab fa-twitter"></i>
            </a>

            <a class="icon-params" href="link2page" target="_blank" rel="noopener">
              <i class="fab fa-github"></i>
            </a>

            <a class="icon-params" href="link2page" target="_blank" rel="noopener">
              <i class="fab fa-linkedin"></i>
            </a>

            <a class="icon-params" href="files/name_CV.pdf">
              <i class="ai ai-cv"></i>
            </a>
          </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>
            <h2>Interests</h2>
            <ul>
              <li>Stuff</li>
              <li>Stuff</li>
              <li>More Stuff</li>
            </ul>
          </td>
          <td>
            <h2>Education</h2>
            <ul class="ul-edu fa-ul">
              <li>
                <i class="fa-li fas fa-graduation-cap"></i> PhD Psycology <br>
                <span class="text-muted">
                                Miskatonic University, Arkam
                            </span>
              </li>
              <li>
                <i class="fa-li fas fa-graduation-cap"></i> MA Psychology<br>
                <span class="text-muted">
                                Miskatonic University, Arkam
                            </span>

              </li>
              <li>
                <i class="fa-li fas fa-graduation-cap"></i> BA Philosophy<br>
                <span class="text-muted">
                                Miskatonic University, Arkam
                            </span>
              </li>
            </ul>
          </td>
          <td></td>

        </tr>
      </tbody>
    </table>
  </section>
  <!-- endregion Personal Bio-->



  <!-- #region Skills-->
  <section class="section-segmenter" id="skills">
    <table id="skills-table" align="center">
      <thead>
        <tr>
          <th colspan="10">
            <span class="section-title">Skills</span>
          </th>

        </tr>
      </thead>

      <tbody>
        <tr>

          <td>
            <i class="fab fa-r-project skills-icons"></i>
            <br><span class="skills-label">Statistical Software R</span>
            <br>Proficient
          </td>
          <td>
            <span class="iconify skills-icons" data-icon="file-icons:matlab" data-inline="false"></span>
            <br><span class="skills-label">Matlab</span>
            <br>Proficient
          </td>
          <td>
            <span class="iconify skills-icons" data-icon="clarity:command-line" data-inline="false"></span>
            <br><span class="skills-label">Command Line</span>
            <br>Proficient
          </td>
          <td>
            <span class="iconify skills-icons" data-icon="file-icons:c" data-inline="false"></span>
            <br><span class="skills-label">C++</span>
            <br>Competent
          </td>

        </tr>

        <tr>
          <td>
            <br><span class="skills-icons" style="font-family: Arial, Helvetica, sans-serif;font-size: 3.5rem;">FSL</span>
            <br><span class="skills-label">FMRIB <br>Software Library</span>
            <br>Data processing & analysis
          </td>
          <td>
            <br><span class="skills-icons" style="font-family: Arial, Helvetica, sans-serif;font-size: 3.5rem;">AFNI</span>
            <br><span class="skills-label">Analysis of <br>Functional Neuroimages</span>
            <br>Data processing & analysis
          </td>
          <td>
            <br><span class="skills-icons" style="font-family: Arial, Helvetica, sans-serif;font-size: 3.5rem;">SPM</span>
            <br><span class="skills-label">Statistical <br>Parametric Mapping</span>
            <br>Data processing & analysis
          </td>
          <td>
            <br>
            <span class="iconify skills-icons" data-icon="medical-icon:i-mri-pet" data-inline="false"></span>
            <br><span class="skills-label">MRI:</span>
            <br>Data collection, <br>proccessing, & analysis
          </td>
        </tr>

        <tr>
          <td>

            <i class="fab fa-html5 skills-icons"></i>
            <br><span class="skills-label">HTML</span>
            <br>Novice
          </td>
          <td>
            <i class="fab fa-css3-alt skills-icons"></i>
            <br><span class="skills-label">CSS</span>
            <br>Novice
          </td>
          <td>
            <span class="iconify skills-icons" data-icon="uim:java-script" data-inline="false"></span>
            <br><span class="skills-label">JavaScript</span>
            <br>Novice
          </td>
          <td>
            <i class="fas fa-eye skills-icons"></i>
            <br><span class="skills-label">Eye-Tracking</span>
            <br>Task design & data collection
          </td>
        </tr>
      </tbody>
    </table>
  </section>

  <!-- endregion Skills-->


  <!-- #region Experience-->
  <section class="section-segmenter center" id="experience">
    <table id="experience-table" align="center">
      <thead>
        <tr>
          <th style="width:40%; ">
            <span class="section-title">Experience</span>
          </th>
          <th style="background-color: var(--dark);width: 50%;">
            job title, <a href="link2page" target="_blank" rel="noopener">lab tilte</a><br> Advisor: <a href="link2page" target="_blank" rel="noopener">Name</a><br>
            <div class="text-muted">
              <span>institute</span><br>
              <span>date </span>
            </div>
          </th>
          <th style="width:5%;"></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <!-- Removed the underline text decoration on these, because they ARE NOT actually links-->
          <td style="background-color: var(--dark);">
            job title, <a style="text-decoration: none">lab name</a><br> Advisor: <a style="text-decoration: none">Name</a><br>
            <div class="text-muted">
              <span>Institute</span><br>
              <span>date</span>
            </div>
          </td>
        </tr>

        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td style="background-color: var(--dark);">
            Student, <a href="link2page" target="_blank" rel="noopener">Program</a><br>
            <div class="text-muted">
              <span>Institute</span><br>
              <span>date</span>
            </div>
          </td>
        </tr>

        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td style="background-color: var(--dark);">
            student, <a href="link2page" target="_blank" rel="noopener">Program</a><br> Advisors: <a href="link2page" target="_blank" rel="noopener">name</a>            & <a href="link2page" target="_blank" rel="noopener"> name</a><br>
            <div class="text-muted">
              <span>Institute</span><br>
              <span>date</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
  <!-- endregion Experience-->


  <!-- #region Featured Publications & Presentations-->
  <section class="section-segmenter center" id="publications">
    <table id="publications-table" align="center">
      <thead>
        <tr>
          <th style="width:36%;">
            <span class="section-title">Featured<br> Publications & Presentations</span>
          </th>
          <th style="width:50%; background-color: var(--light);">
            <strong>me</strong>, Name, Name, Name (date).
            <a href="link"><em>Project title</em></a>
            <span class="text-muted">Journal</span>
          </th>

        </tr>
      </thead>

      <tbody>
        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td style="background-color: var(--light);">
            Name, Name, <strong>Me</strong>, Name (date).
            <a href="link2page" target="_blank" rel="noopener"><em>project title</em></a>
            <span class="text-muted">Journal</span>
          </td>

        </tr>

        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td style="background-color: var(--light);">
            <strong>Me</strong>, Name, Name, & Name (date).
            <a href="link2pdf"><em>Project title</em></a>
            <span class="text-muted">Journal</span>
          </td>

        </tr>

        <tr>
          <!--Blank Row Seperator-->
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td style="background-color: var(--light);">
            Name, Name, Name, <strong>Me</strong>, & Name (date).
            <a href="link2pdf"><em>Project title</em></a>
            <span class="text-muted">Journal</span>
          </td>

        </tr>
      </tbody>
    </table>
  </section>

  <!-- endregion -->


  <!-- #region Projects-->
  <!--
<section class="section-segmenter center" id="projects">
    <table id="projects-table" align="center">
        <thead>
            <tr>
                <th style="width:43%;">
                    <span class="section-title">Projects</span>
                </th>
                <th style="width:50%;">Ex1</th>
                <th style="width:5%;"></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td></td>
                <td>Blank Row Seperator</td>
            </tr>

            <tr>
                <td></td>
                <td>Ex2</td>
                <td></td>
            </tr>
            
            <tr>
                <td></td>
                <td>Blank Row Seperator</td>
            </tr>

            <tr>
                <td></td>
                <td>Ex3</td>
                <td></td>
            </tr>
        </tbody>
    </table>

</section>-->

  <!-- endregion -->

  <!-- #region Contact Info-->
  <div class="contact section-segmenter" id="contact">
    <table id="contact-table" align="center">
      <thead>
        <tr>
          <th>
            <h1>Contact info</h1>
          </th>
          <th>
            <ul class="fa-ul">
              <li style="font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
                <i class="fa-li fas fa-envelope contact-icon" aria-hidden="true"></i>
                <a href="mailto:link2mail">Email</a>
              </li>
              <li>
                <i class="fa-li fas fa-map-marker contact-icon" aria-hidden="true"></i> Institute Location
              </li>
              <li>
                <i class="fa-li fa fa-phone contact-icon" aria-hidden='true'></i> Office: Number
              </li>
              <li>
                <i class="fa-li fas fa-inbox contact-icon" aria-hidden="true"></i> Mail Code
              </li>
            </ul>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr></tr>
      </tbody>

    </table>
  </div>

  <!-- endregion -->

</body>

</html>

以下是桌面设备上的预期结果与背景被截断的移动设备上的结果的一些屏幕截图：

[桌面截图][1]

[手机截图][2]

注意：我已经尝试将以下代码添加到我的 css 文件中，但它似乎没有任何改变。我还尝试将 width: 100% 添加到“section-segmenter”class，这似乎也没有太大变化。

html, body{
  width: 100%;
  height: 100%;
  }

编辑更新：刚刚尝试在 head 标记中使用此代码片段，虽然它确实进行了更改，但它只是进一步压缩了该部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[![手机截图][3]][3]

编辑更新：我添加了一个媒体查询，当屏幕的最大宽度为 600 像素时，它会将 'section-segmenter' 的宽度扩展到 1300 像素。这似乎主要解决了移动设备上的问题。但是，我怀疑这是解决此问题的一种相当粗略的方法，并且只是暂时的。我相信我将不得不考虑更改我的网站表格的宽度单位，可能会按照用户 David Taiaroa 的建议将它们转换为 %。

@media only screen and (max-width:600px){
    .section-segmenter:nth-child(even){
        background-color: var(--light);
        position: relative;
        left: 0;
        right: 0;
        z-index: 0;
        padding: 15px;
        width: 1300px;
    }
}

[1]: https://i.stack.imgur.com/OKxt5.png [2]: https://i.stack.imgur.com/McBuP.jpg [3]: https://i.stack.imgur.com/6HOMr.jpg

Answer 1

问题的根源在于您对某些元素的宽度进行了硬编码。

在移动屏幕上，这些元素比视口或屏幕宽度宽，因此内容会超出屏幕的右侧。这会导致您描述的问题以及其他问题。

这也是添加视口元标记后问题变得更糟的原因

我注意到一些具有导致问题的硬编码宽度的元素是

#nav-table {
...
width: 1300px;
}


#bio-table {
...
width: 1200px;
}

#skills-table {
 .... 
width: 1200px;
}

您想要做的是研究使用媒体查询在视口更改时修改 css，
例如 https://www.w3schools.com/css/css_rwd_mediaqueries.asp
和/或使用随视口变化而缩放的单位
例如 % 或 vw 而不是像素。

网页部分背景在移动设备上被切断

Webpage Section Background is being cutoff on mobil device

html

css

mobile