个人中心
gpt4 book ai didi

html - 标题文本在移动设备上被截断

转载 作者：行者123 更新时间：2023-11-27 23:17:39 24 4
gpt4 key购买 nike

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

最佳答案

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

关于html - 标题文本在移动设备上被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42429516/

24 4 0
文章推荐： C++ 递归函数
文章推荐： css - 父元素覆盖子元素样式
文章推荐： css - 在 React 中动画 div(进入和退出)
文章推荐： javascript - Angular $注入(inject)器:modulerr Module Error
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com