Question

祝大家新年快乐！

我在Stack Overflow上的第一个问题。

我正在尝试为自己构建一个简单的博客，我正在尽力使其对大多数设备做出响应。但iPhone 4令我头疼。

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

我关闭名为“标题”的delete，然后打开一个名为“内容”的新内容，我想要实际的博客文字。

我在笔记本电脑，iPad，iPhone 6,5和4上测试了我的网站。后者让我很头疼。只要我向“内容”div添加任何格式，之前的div，“标题”就会超过100vh，因此您必须在文章文字开始前向下滚动很远。更令人困惑的是，错误似乎不一致。重新加载页面会给我不同的结果，有时，如果我经常刷新它，它偶尔会出现。这是一个有时它的例子：

我到处寻找解决方案，但我不知道自己做错了什么。我会喜欢一些帮助。以下是我认为相关的HTML和CSS，如果您需要更多信息，请与我们联系。

div

div

Answer 1

因为并非所有浏览器都以相同的方式解释我们的代码，甚至最糟糕的是，在这种情况下甚至没有一些较新的属性Viewport H/W即vh/vw对某些浏览器进行回退有时候是一个好主意，所以设置这个可能会有所帮助，希望它有所帮助。

此外，我不知道您是否打算让headline成为min-height意味着可以更高所以如果您还尝试设置其height: 100vh，则会发生。

body{
height:100%; 
width: 100%
}

#headline{
height: 100%;
height: 100vw;
/* rest of your code . . . */
}

* {
    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 {
    height: 100%;
    width: 100%
}

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;
    height: 100%;
    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>    </p>
        </div>

        <div id="footer">
            <p> &#169; 2016 Peter Dam. All rights reserved.</p>
        </div>
</body>    
</html>

由于视宽，移动设备可以拉伸屏幕

1 个答案: