我正在创建一个简单的网站，并且在某些移动设备上查看时，我的标题元素之一中的文本被隐藏/切断。在模拟移动设备 (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>© 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
}
}
最佳答案
承认这一点很尴尬，但问题是遗漏了元视口(viewport)标签。将其添加到页面后，一切都完美运行。
关于html - 标题文本在移动设备上被切断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42429516/