标题文本在移动设备上被截断答案

【问题标题】：Heading Text Being Cut Off On Mobile标题文本在移动设备上被截断
【发布时间】：2017-02-24 02:04:53
【问题描述】：

我正在创建一个简单的网站，在某些移动设备上查看时，我的一个标题元素中的文本被隐藏/截断。当在模拟移动设备 (Galaxy S5) 的 Chrome 开发人员工具中查看时，以及在 chrome 中的实际移动设备 (Galaxy S5) 中查看时，都会发生这种情况。使用 iPhone 6 的标准浏览器查看时，我无法复制该问题。我已调整 CSS 无济于事。

这是 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Concierge</title>
  <link rel="icon" href="images/favicon.ico" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="build/styles/home.css" />
</head>

<body>
  <div class="wrapper">
    <nav class="flex-nav">
      <a class="toggleNav">☰ Menu</a>
      <ul>
        <li><a>Multifaceted Approach</a></li>
        <li><a>Guest Version</a></li>
        <li><a>Administrator Version</a></li>
        <li class="social">
          <a href="http://twitter.com/MultifacetedApp"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="social">
          <a href="http://facebook.com/MultifacetedApproach"><i class="fa fa-facebook"></i></a>
        </li>
      </ul>
    </nav>
    <section class="introduction">
      <h1>Concierge</h1>
      <h3>Give Your Guests The Ultimate Experience</h3>
      <img src="images/introduction.png">
    </section>
    <section class="ourMission">
      <h2>Our Mission</h2>
      <p>People are demanding more and more when it comes to technology. Guests in the hospitality industry are no different.
        We designed Concierge to give hotels, bed & breakfasts, and resorts a way to interact with their guests in a way
        that suits their needs of the new digital age.Concierge consists of a 'Guest' and 'Administrator' version. Each application
        is different, but works with the other to enhance your guests' stay and increase your organization's efficiency.
      </p>
    </section>
    <section class="communication">
      <h2>Communication</h2>
      <h3>Real-time two-way communication is the heart of what makes Concierge a true asset to your organization</h3>
      <img src="images/communication.png" alt="">
    </section>
    <section class="guestFeatures">
      <h2>Guest Features</h2>
      <div class="sideBySideImage">
        <h3>Concierge includes all of the standard features of a traditional alarm-clock radio</h3>
        <img src="images/guestFeaturesAlarm.png" alt="">
        <img src="images/guestFeaturesMain.png" alt="">
      </div>
      <div class="sideBySideImage">
        <h3>Allow your guests to search for local attractions and stay on top of the most recent news headlines</h3>
        <img src="images/guestFeaturesYelp.png" alt="">
        <img src="images/guestFeaturesNews.png" alt="">
      </div>
    </section>
    <section class="administratorFeatures">
      <h2>Administrator Features</h2>
      <img src="images/administratorFeatures.png" alt="">
    </section>
    <section class="signup">
      <h2>Request Free Demo Access</h2>
      <form method="POST" action="/demo/organization" class="signup">
        <input name="name" type="text" placeholder="Your Name">
        <input name="email" type="email" placeholder="Email Address">
        <input name="organization" type="text" placeholder="Your Organization">
        <input type="submit" value="Learn more">
      </form>
    </section>
    <footer>
      <p>&copy; Multifaceted Approach, LLC</p>
    </footer>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    // document.ready shorthand
    $(function () {
      $('.toggleNav').on('click', function () {
        $('.flex-nav ul').toggleClass('open');
      });
    });
  </script>
</body>

</html>

这是 CSS：

/* General CSS Styling */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin: 0;
  background-color: black;
  background-image: linear-gradient(90deg, #202020, #000000, #202020);
}

a {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  text-decoration: none;
  background: rgba(50, 50, 50, 0.8);
  padding: 20px 5px;
  display: inline-block;
  width: 100%;
  text-align: center;
  transition: all 0.5s;
}

a:hover {
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  cursor: hand;
  color: black;
}

.toggleNav {
  display: none;
}

.introduction img {
  width: 100%;
  max-width: 1200px;
}

.wrapper {
  margin: 0 auto;
}

input {
  padding: 10px;
  border: 0;
}

section,
footer {
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  color: white;
  font-weight: 100;
}

h1 {
  font-size: 3em;
  font-weight: 300;
}

h2 {
  font-size: 2em;
  font-weight: 200;
}

h3 {
  font-size: 1.5em;
  font-weight: 100;
  color: #5092d3;
}

input[type="text"] {
  margin-top: 5px;
}

::-webkit-input-placeholder {
  color: black;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: black;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: black;
}

:-ms-input-placeholder {
  color: black;
}


/* Specific Section/Portion Styling */

.sideBySideImage {
  width: 100%;
}

.sideBySideImage img {
  width: 49%;
}

.communication img,
.administratorFeatures img {
  width: 100%;
  max-width: 1200px;
}

.introduction,
.guestFeatures {
  background-image: linear-gradient(90deg, #202020, #000000, #202020);
}

.ourMission {
  background: #00345a;
}

.ourMission h2 {
  margin-bottom: 0;
}

.ourMission p {
  display: inline-block;
  max-width: 1200px;
  color: #5092d3;
  font-size: 1.5em;
}

.communication,
.administratorFeatures {
  background: black;
}

footer {
  white-space: nowrap;
}


/* Flex Container */

.flex-nav ul {
  border: 1px solid white;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}


/* Flex Item */

.flex-nav li {
  flex: 3;
}

.flex-nav .social {
  flex: 1;
}

.fa-facebook {
  color: #3b5998;
}

.fa-twitter {
  color: #1da1f2;
}

@media all and (max-width:1000px) {
  .flex-nav ul {
    flex-wrap: wrap;
  }
  .flex-nav li {
    flex: 1 1 50%;
  }
  .flex-nav .social {
    flex: 1 1 25%;
  }
}


@media all and (max-width:500px),
(max-device-width:500px) {
  a {
    font-size: 2em;
  }
  input,
  input::-webkit-input-placeholder {
    font-size: 1em;
  }
  .flex-nav li {
    flex-basis: 100%;
  }
  /* Turn on flexbox */
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  /* Reorder items */
  .wrapper>* {
    order: 999;
  }
  /* Nav */
  .flex-nav {
    order: 1;
  }
  .toggleNav {
    display: block;
  }
  .flex-nav ul {
    display: none;
  }
  .flex-nav ul.open {
    display: flex
  }
}

Mobile Screenshot Of Problem

【问题讨论】：

当在 Chrome 开发者工具中以响应模式运行代码时，我没有截断文本——它通过大量填充缩小。上面的代码肯定不会复制这个问题——它缺少一些结束标签，所以也许你有一些额外的代码导致了这个问题。您是否使用任何框架，例如 Bootstrap 或 Foundation？您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示所有相关代码？干杯:)
您的 CSS 过早结束。并且您知道您应该使用元视口标签，以便您的页面在移动设备上缩小吗？
我已经添加了缺少的标签，不，我没有使用任何框架，而且问题似乎不影响响应模式，但它确实影响了 Galaxy S5。 @黑曜石时代
我为您的 HTML 和 CSS 创建了这个 jsfiddle，并且在我的 iPhone 上的 safari 或 chrome 上没有填充或边距问题。 jsfiddle.net/byqkhvLp。如果我错过了您引用的问题，我会将其添加到您的问题中以帮助人们进行测试。
我想我不知道@MichaelCoker，这里会是什么样子？

标签： html css

【解决方案1】：

承认很尴尬，但问题是省略了元视口标签。将其添加到页面后，一切正常。

【讨论】：

【解决方案2】：

您可以尝试使用引导程序添加 <div class="container-fluid"> 并将导致您出现问题的标题嵌套在其中。

使用引导程序，它可以帮助您的页面响应所有屏幕尺寸和规格。顺便说一句，我在移动设备上测试了您的 HTML，没有发现标题有任何问题。

【讨论】：