Question

我正在创建一个简单的网站，当在某些移动设备上查看时，我的某个标题元素中的文字正在被隐藏/截止。当在用于模拟移动设备（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

Answer 1

令人尴尬承认，但问题是遗漏了一个元视口标记。一旦将其添加到页面中，一切都运行良好。

Answer 2

您可以尝试使用bootstrap添加<div class="container-fluid">并嵌套导致您出现问题的标题。

使用bootstrap，它可以帮助您的页面响应所有屏幕尺寸和规格。顺便说一下，我在移动设备上测试了你的HTML，并没有看到标题的任何问题。

标题文本被移动切断

2 个答案: