Menu
I have set up a very simple webpage which works the way I intend on a desktop browser, but shows strange results on mobile. Here is the code :
body {
font-family: "Raleway", "Tahoma", "Helvetica", "Arial", Sans-serif;
line-height: 1.4;
color: #303030;
font-size: 20px;
}
a,
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
#container {
width: 900px;
margin: 30px auto 0px auto;
}
#links .name {
display: inline-block;
font-size: inherit;
width: 90px;
}
#links .link {
display: inline-block;
font-size: inherit;
}
.box {
background-color: rgba(255, 255, 255, 1);
padding: 20px 20px;
margin: 20px 0px;
box-shadow: 0 1px 1px #D0D0D0;
}<!DOCTYPE html>
<html>
<body>
<div id="container">
<section class="box">
Hi ! My name is <strong>Name</strong>. You might also know me as <strong>User</strong>. Bla bla bla, this is some text here. But not too much.
</section>
<section class="box">
My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
</section>
<section class="box">
Reach me easily on <a href="https://twitter.com/Protectator">Twitter</a> !
<br>
<br> You can also find me on
<ul id="links">
<li>
<div class="name">Twitter</div>
<div class="link"><a href="https://twitter.com/Protectator">@Username</a></div>
</li>
<li>
<div class="name">Facebook</div>
<div class="link"><a href="https://www.facebook.com">Username</a></div>
</li>
<li>
<div class="name">Google+</div>
<div class="link"><a href="https://plus.google.com">+Username</a></div>
</li>
</ul>
</section>
</div>
</body>
</html>It works perfectly and displays things the way I want when viewed in a dekstop browser :
However, when I view the page from a mobile device, the size of the text of <li> elements get reduced compared to the rest of the page. Here is how it looks :
I have no idea why this happens. Looking at it through the dev tools, it seems like the font-size of the first two <section> elements goes up when on mobile (I've set it to 20px in body, but they go way higher in reality :
).
The thing I don't understand is then why doesn't this also happen on the <li> elements ? I could use
<meta name="viewport" content="width=device-width, initial-scale=1">
but then the page would look ugly on phone, which is not what I'm looking for. I just want the text to be the same size on the page.
It seems like the display: inline-block is what causes this, but can't find an other way to achieve aligning the <a> elements vertically only using inline elements.
324
Just turn
#container {
width: 900px;
}
into
#container {
max-width: 900px;
}
and also apply
<meta name="viewport" content="width=device-width, initial-scale=1" />
in the <head>-section of your html. Check here, I've set it up on my own server (to stay there) for your reference. Find the css here.
Since your #container did have a fixed width: 900px your mobile browser automatically scales it down to fit the viewport width. Since browsers do this in an intelligent way, they do increase the font-size of elements to match the intended font-size of elements (which is why you saw much bigger font-size in calculated styles than in the stylesheet).
For some strange reason I cannot explain the browser does not seem to do this for all elements, though.
141
I faced very similar issue while developing a responsive app whose font should look same in tablet browser and desktop browser (Chrome here)
So, what fixed for me is using flex or inline-block for display
#container {
display: flex; \* or display:inline-block *\
}
I am not sure why it works but this works great
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
