0
我在堆棧溢出的第一篇文章。iPhone 4（僅限於）由於視圖延伸div的屏幕
我正在嘗試爲自己創建一個博客，並且正在盡我所能使它對大多數設備的響應能力。但iPhone 4讓我頭疼。
爲我的博客文章，我設想的是，用戶首先看到的是一個div具有的100vh的高度和100vw寬度，包含圖像和博客文章的標題，就像這樣：
我關閉div，稱爲「標題」，並打開一個新建一個名爲「內容」，我想實際的博客文字是。
我已經在筆記本電腦，iPad，iPhone 6,5和4上測試過我的網站。後者讓我頭疼。只要我向「內容」div添加任何格式，前面的div「標題」就會延伸到100vh以上，因此您必須在文本開始前向下滾動很遠。更令人困惑的是，這個錯誤似乎並不一致。重新加載頁面給了我不同的結果，有時候，如果我經常刷新它，它偶爾會按預期顯示。下面是什麼，有時看起來像一個例子：
我到處找一個解決辦法，但我不知道我做錯了。下面是HTML和CSS，我認爲是相關的，請讓我知道如果你需要更多的信息：
* {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
border: none;
font-weight: normal;
}
html, html a {
font-size: 10px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
html {
}
body {
}
a {color: inherit;}
a:visited {text-decoration: none; color: inherit;}
#namelogo p {
padding-left: 1rem;
padding-top: 1rem;
font-size: 3rem;
color: white;
text-align: left;
}
#namelogo a {
font-size: 3rem;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
#namelogo a:hover {
text-shadow: 1px 1px 20px #fff;
}
#headline {
position:relative;
min-height: 100vh;
max-width: 100vw;
background-color: black;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#layer {
min-height: inherit;
width: inherit;
}
#vertical-align {
position: absolute;
top: 52%;
-moz-transform: translateY(-52%);
-ms-transform: translateY(-52%);
-webkit-transform: translateY(-52%);
transform: translateY(-52%);
width: 100%;
}
.posttitle {
padding-left: 1.5rem;
padding-right: 1.5rem;
text-align: center;
color: white;
font-size: 4rem;
line-height: 90%;
font-family: "Crimson Text", "Georgia", serif;
}
.postinfo {
padding-top: 1.3rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
font-family: "Crimson Text", "Georgia", serif;
color: white;
font-size: 1.3rem;
}
#content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
#content h1 {
font-family: "Crimson Text", "Georgia", serif;
color: #353535;
font-size: 2.8rem;
line-height: 3.4rem;
padding-top: 8rem;
padding-bottom: 4.5rem;
padding-left: 2rem;
padding-right: 2rem;
}
#content h2 {
font-family: "Crimson Text", "Georgia", serif;
color: #333333;
font-size: 2.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
#content p {
font-family: "Crimson Text", "Georgia", serif;
color: #353535;
padding-left: 2rem;
padding-right: 2rem;
font-size: 2.3rem;
word-wrap: break-word;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://fonts.googleapis.com/css? family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="headline" style="background-image: url(https://images.unsplash.com/photo-1449710146567-1e282fa41f2f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1bffcef22907f217af2fdbc3e430855);">
<div id="layer" style="background-color: rgba(0,0,0,0.4)">
<div id="namelogo">
<p><a href="../index.html">Peter Dam</a></p>
</div>
<div id="vertical-align">
<h1 class="posttitle">Why the Unfamiliar is Frightening and Why You Should Face It Anyway</h1>
<p class="postinfo">January 4, 2016 • 13 minute read • by Peter Dam</p>
</div>
</div>
</div>
<div id="content">
<h1>I have never done this before. My decision to pursue a future as a writer came as a surprise to myself. When I tell people about it—especially that it will revolve around a blog—I typically receive a sympathetic, concerned smile. A smile that tells me they think it's an appealing ambition, but also naïve.</h1>
<p>
I often find myself procrastinating and postponing the act of sitting down to write. My mind is mostly on how much better the other writers are, and I feel hesitant to begin. Instead, I convince myself that it's more logical to finish designing my website first, or to read an article about how to write well.
<br><br>
This isn’t because I have nothing to say or because other people doubt me, but because I doubt myself. I’m still insecure in my abilities. I have to create my own plan, and I’m scared that I won’t be able to execute it.
<br><br>
I keep hoping that I’ll find some sort of guarantee that it’s all going to work out. Sure, I welcome good surprises and the occasional adventure, but for the most part, knowing what to expect lets me plan ahead and gives me some peace of mind.
<br><br>
As I’m contemplating my situation and my future, fear creeps in and tells me to reconsider. Maybe I should simply drop the idea. Maybe I should listen and choose the safer path. I’m tempted.
<br><br>
But before we decide to give in to peer pressure or to our insecure selves, it is helpful to see our feelings for what they are. When we are in doubt, understanding where our emotions and inclinations come from can enable us to make better, informed decisions.
<br><br>
As it turns out, our tendency to avoid the new and unfamiliar partly comes from our ancestors.
<br><br> </p>
</div>
<div id="footer">
<p> © 2016 Peter Dam. All rights reserved.</p>
</div>
</body>
</html>預先感謝您的幫助！
歡迎來到SO！ :)你看過這個嗎？ http://stackoverflow.com/questions/32741030/view-width-issue-in-iphone-4 – cweitat
我*認爲*這是一個問題與'背景大小：封面'影響較舊版本的iOS。你可以嘗試[沿着這些線]（http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios），或者如果你使用jQuery，使用它作爲回退以填充舊版瀏覽器的視口？ – nickpish