iPhone 4 (только) растягивает div за пределы экрана из-за ширины просмотра

Мой первый пост здесь, в Stack Overflow.

Я пытаюсь создать блог для себя и изо всех сил стараюсь сделать его адаптивным для большинства устройств. Но iPhone 4s вызывает у меня головную боль.

Что касается моих статей в блоге, я предполагаю, что первое, что увидит пользователь, это div высотой 100vh и шириной 100vw, содержащий изображение и заголовок статьи в блоге, например:

предполагаемый вид

Я закрываю этот div под названием «Заголовок» и открываю новый под названием «Контент», где я хочу, чтобы был фактический текст блога.

Я протестировал свой сайт на ноутбуке, iPad, iPhone 6, 5 и 4. Последнее вызывает у меня головную боль. Как только я добавляю какое-либо форматирование в «Содержание» div, предыдущий div, «Заголовок», растягивается далеко за пределы 100vh, поэтому вам приходится прокручивать очень далеко вниз, прежде чем текст начнется. Что еще более сбивает с толку, так это то, что ошибка кажется непоследовательной. Перезагрузка страницы дает разные результаты, и иногда, если я обновляю ее достаточно часто, она иногда появляется так, как предполагалось. Вот пример того, как это иногда выглядит:

растянутый div

Я везде искал решение, но я просто не знаю, что я делаю неправильно. Вот 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>

Заранее спасибо за вашу помощь!


iphone html css responsiveness
person Peter Dam    schedule 30.12.2015    source источник
comment
добро пожаловать в СО! :) вы смотрели на это? stackoverflow.com/questions/32741030/   -  person cweitat    schedule 31.12.2015
comment
Я думаю, что это проблема с background-size: cover, которая затрагивает более старые версии iOS. Не могли бы вы попробовать что-нибудь в этом духе или если вы повторно использовать jQuery, использовать его как запасной вариант, чтобы заполнить область просмотра для старых браузеров?   -  person nickpish    schedule 18.07.2016

Ответы (1)


arrow_upward
2
arrow_downward

Лучшее решение, по-видимому, заключается в том, чтобы избегать использования 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 или даже Нацеливание на iPhone 4 и 5 отдельно с помощью медиа-запросов).

person Stefano Spensieri    schedule 28.03.2017