Css how to allow accessibility Text scaling

user_1034912 0
Viewed 107

I'm developing a simple html app. When I set the accessibility settings in chrome android text scaling to 150% the website text should change accordingly. This seems to work on many websites such as stackoverflow. However, in my website it does not work. Despite using 'rem' on all font sizes.

I am also using bootstrap4.

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <title>jola</title>
</head>

<body style="line-height: 1.15;">
    <div class="j-screen" style="background: #f7f7f7;"><span>This is not scaling accordingly!!!</span></div>
</body>

</html>

Css

.j-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
bootstrap-4 css html
1 Answers

This is an working example with Bootstrap, hope it was what you was looking for:

.fill { 
    min-height: 100%;
    height: 100%;
    background: #f7f7f7;
}

#test {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  <div class="container-fluid fill">
    <div id="test"><span>This is not scaling accordingly!!!</span> </div> 
  </div>
</body>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

user_151134910
Related