由于视频宽度的原因，iPhone 4（仅）将div拉出屏幕

Question

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

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

对于我的博客文章，我设想的是用户看到的第一件事是 @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater); inflater.inflate(R.menu.search, menu); MenuItem searchItem = menu.findItem(R.id.action_search); mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem); try { Field searchField = SearchView.class.getDeclaredField("mCloseButton"); searchField.setAccessible(true); mSearchCloseButton = (ImageView) searchField.get(mSearchView); if (mSearchCloseButton != null) { mSearchCloseButton.setEnabled(false);// mSearchCloseButton.setEnabled(false); mSearchCloseButton.setImageDrawable(getResources().getDrawable(R.drawable.transparent)); } } catch (Exception e) { Log.e(TAG, "Error finding close button", e); } } ，其高度为100vh，宽度为100vw，包含图像和博客文章的标题，如下所示：

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

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

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

div

* {
    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;
}

提前感谢您的帮助！

Answer 1

最佳解决方案似乎避免使用vh，vw用于无法正确处理它们的设备。 您可以对绝大多数设备使用vh，vw，并通过media-query覆盖：

/* 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）。