luator luator - 6 months ago 10
CSS Question

Edge on mobile device extremely reduces font-size when adding padding

I am trying to optimize a website for mobile devices and stumbled upon this strange issue in Edge on Windows 10 Mobile:

The font size gets dramatically reduced, when I use anything other than a border-/margin-/padding-less box with full width. See the following minimal example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Edge Test</title>
</head>
<body>
<div>
<h1>Without padding</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</p>
</div>

<div style="padding: 1em">
<h1>With padding</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</p>
</div>
</body>
</html>


This is how it looks in edge on my mobile phone:

enter image description here

The same happens if I set margin or border instead of padding or set the width to anything other than
100%
or
auto
.

I guess this is a bug in edge (I am using version 25.10586.318.0)? Or is it for some strange reason intended behaviour?

Either way, is there a way to avoid the downscaling of the text without having to set fixed font sizes?

Answer

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> add these two lines in head section of your document