2

Can someone explain to me why when I set min-height of my section to calc(100vh), it results in a large window size and small text on iOS 10 (iPhone SE)?

section {
  display: flex;
  display: -webkit-flex;
  display: -webkit-box;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  min-height: calc(100vh);
  text-align: center;
}

section div {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <section>
      <div>
        <h1>Title</h1>
        <h2>Description</h2>
      </div>
    </section>
  </body>
</html>
Daniel Höfter
  • 21
  • 3
  • 2
    You must include the code needed to reproduce the problem in your question itself. It is not up to us to start debugging an entire website, seeing that you do not mention which section you're talking about... Please update your question with a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and we'll be happy to help :) – Helenesh Feb 28 '19 at 14:28
  • Check your meta viewport: https://css-tricks.com/snippets/html/responsive-meta-tag/ – Jennifer Goncalves Feb 28 '19 at 14:56
  • Yes, helped. What's mobile safari's default behaviour when I'm not defining it? – Daniel Höfter Feb 28 '19 at 17:43
  • Likely the same question: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser from that this works `.full-heigth { min-height: 100vh; min-height: -webkit-fill-available}` for me – Frank Lämmer Sep 18 '19 at 13:23

1 Answers1

0

have you make default body styling. body{margin:0; padding:0} if not please try this. It may solve your issue if you are using above html,css.

Amarjit Singh
  • 1,152
  • 7
  • 12