由于视图宽度，iPhone 4（仅限）将 div 拉伸到屏幕之外答案

【问题标题】：iPhone 4 (only) stretches div out of screen due to viewwidth由于视图宽度，iPhone 4（仅限）将 div 拉伸到屏幕之外
【发布时间】：2017-03-28 22:39:56
【问题描述】：

我在 Stack Overflow 上的第一篇文章。

我正在尝试为自己构建一个博客，并且我正在尽我最大的努力使其能够响应大多数设备。但是 iPhone 4s 让我头疼。

对于我的博客文章，我的设想是用户看到的第一件事是div，其高度为 100vh，宽度为 100vw，包含一张图片和一篇博客文章的标题，如下所示：

我关闭了名为“Headline”的div，并打开了一个名为“Content”的新的我希望实际博客文本所在的位置。

我在笔记本电脑、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 &bull; 13 minute read &bull; 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> &#169; 2016 Peter Dam. All rights reserved.</p>
        </div>
</body>
</html>

提前感谢您的帮助！

【问题讨论】：

欢迎来到 SO！ :) 你看过这个吗？ stackoverflow.com/questions/32741030/…
我认为这是background-size: cover 的问题，它会影响旧版本的iOS。你可以试试along these lines 吗，或者如果你使用的是 jQuery，可以用它作为后备来填充旧浏览器的视口？

标签： html css iphone responsiveness

【解决方案1】：

最好的解决方案似乎是避免对无法正确处理它们的设备使用 vh、vw。您可以将 vh、vw 用于绝大多数设备，并通过媒体查询覆盖：

/* iPhone 4 (landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
    /* style here */
}

（对于 ios，您可以在此处找到尺寸查询：https://coderwall.com/p/bgf8aa/media-queries-only-for-the-iphone-4-4s-part-ii 甚至 Targetting iPhone 4 and 5 separately with media queries）。

【讨论】：