<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
<style type="text/css">
|
h1,h2,#info,footer {
|
text-align: center;
|
font-size: 1.3em;
|
font-weight: normal;
|
font-family: Futura, "Segoe UI", sans-serif;
|
margin: 20px;
|
}
|
footer {
|
display: block;
|
}
|
h1 {
|
margin-bottom: 0px;
|
}
|
h2 {
|
margin-top: 0px;
|
}
|
h2, #info {
|
font-size: 1em;
|
}
|
#emoji {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
#emoji > p {
|
margin: 0px;
|
padding: 0px 10px;
|
height: 1.2em;
|
font-size: 55px;
|
}
|
#cactus {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
a {
|
color: hsl(206, 82%, 52%);
|
}
|
</style>
|
</head>
|
<body>
|
<h1>The maximum font size for emoji is 54px.</h1>
|
<h2>(Tested May 2017.)</h2>
|
<div id="emoji">
|
<p id="cactus">🌵</p>
|
<p>🍔</p>
|
<p>🎾</p>
|
<p>🌸</p>
|
<p>😀</p>
|
</div>
|
<p id="info">
|
The smallest maximum size 54px comes from <a
|
href="https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/7791618/snapshots/z79bf653f96101345513">Galaxy S6
|
Android 5.0 Chrome 58</a>.<br/>
|
If you set it to 55px the emoji
|
<a
|
href="https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/7791726/snapshots/z5e0880d480e1aef4b9e">are
|
not shown</a>.
|
</p>
|
<footer>
|
<a href="/">tobireif.com</a>
|
</footer>
|
</body>
|
</html>
|