CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
Jonhz
Jonhz

Reputation: 115

font-size with initial-scale is too big in mobiles

So I have this html page:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container">
        <div class="col-lg-12">
            <div>
                <h1 class="text">Hello</h1>
                <h1 class="text">Welcome</h1>
            </div>
        </div>
    </div>
</body>
</html>

And this CSS:

.text{
    margin-top: 50px;
    text-transform: uppercase;
    text-align: center;
    font-family: Arial;
    font-size: 120px;
}

The problem is that the font-size in mobile with the initial-scale set up to 1 is too big in mobiles and too small when i do not set initial-scale.

PC: http://cl.ly/image/3S3u1V3N3G40/hello.jpg

Mobile with initial-scale=1: http://cl.ly/image/2W0N142o1f16/IMG_1020.PNG (text is too big)

Mobile without initial-scale=1: http://f.cl.ly/items/2s0O3x122R2b0o1F2P3Q/IMG_1021.PNG (text is too small)

The question is: how can i make the text size looks good both in PC and in mobile, in a responsive way?

Upvotes: 3

Views: 4442

Answers (4)

timv
timv

Reputation: 3366

Here is my solution to the issue that I gleaned from Fabian's example. I needed a call now button text to drop down in text size once I was on a mobile device so I modified it as follows:

Class in my example is "callNow" and irrelevant properties of the class removed. As soon as it drops below 400px the text size reduces.

.callNow {
}

@media (max-width: 400px) {
  .callNow {
    font-size: .5em;
  }
}

@media (min-width: 401) {
  .callNow {
    font-size: 1em;
  }
}

Upvotes: 0

Joe Hart
Joe Hart

Reputation: 1

In the body tag set your initial font size to something like 14px, then use EM for different media queries as mentioned above, i.e. font size: 1.1em, 1.4em, etc. I'm surprised the heading tags use px instead of em. It seems much easier to set a base font size and scale using em.

Upvotes: 0

Fabian Mebus
Fabian Mebus

Reputation: 2415

Googles recommendation for the meta viewport is to use the initial-scale=1

<meta name="viewport" content="width=device-width, initial-scale=1">

Try a Mobile-First-Approach. Start developing for smaller viewports first and adjust with media queries when the viewport gets wider.

In general using em instead of px for font sizes is considered a best practices.

So you could go with something like this:

.text {
  margin-top: 50px;
  text-transform: uppercase;
  text-align: center;
  font-family: Arial;
  font-size: 1em;
}

@media (min-width: 600px) {
  .text {
    font-size: 1.1em;
  }
}

@media (min-width: 1100px) {
  .text {
    font-size: 1.2em;
  }
}

@media (min-width: 2200px) {
  .text {
    font-size: 1.4em;
  }
}

Upvotes: 7

Michael Money
Michael Money

Reputation: 2449

Leave initial-scale=1 and add media query in your CSS file like in example below (this is media query for iPhone since your screens are taken from the iPhone 5/5s)

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) {


.text {
    /* Adjust font-size to your preferences */
    font-size: 30px;
    }
}

Upvotes: 0

Related Questions