在mobil设备上网页部分的背景正在被切断

Question

我正努力从零开始建立一个网站，作为一个网络简历和工作/学校申请。我对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: '\00B7';
}


/*#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>

​

以下是桌面上想要的结果的一些屏幕截图，以及背景被切断的Mobile上的结果：

桌面屏幕截图

移动式截屏

注意:我已经尝试将以下代码添加到我的css文件中，而且它似乎没有改变任何东西。我还尝试将width: 100%添加到“节分段器”类中，这个类似乎也没有多大变化。

​

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

​

编辑更新:只是尝试使用head标记中的代码片段，虽然它确实进行了更改，但它只是进一步浓缩了这一节。

​

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

​

编辑更新:当屏幕的最大宽度为600 max时，我添加了一个媒体查询，将“节段分段器”的宽度扩展到1300 max。这似乎主要解决了移动设备上的问题。不过，我怀疑这是解决这问题的一个相当粗糙的方法，而且只是暂时的。我相信我将不得不考虑更改我的站点表宽度的单位，很可能会像用户David所建议的那样将它们转换为%。

​

@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

问题的根源在于您已经硬编码了一些元素的宽度。

在移动屏幕上，这些元素比视口或屏幕宽度更宽，因此内容从屏幕的右侧延伸开来。这将导致您描述的问题以及其他问题。

这也是当您添加viewport meta标记时问题变得更糟的原因。

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

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


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

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

您要做的是查看如何使用媒体查询来修改css，因为视图端口发生了更改，

eg https://www.w3schools.com/css/css_rwd_mediaqueries.asp

或者使用将随着视口变化而缩放的单位。

例如%或大众而不是像素。