У меня есть HTML с iFrame. Контейнер <div> и iframe имеют ширину 381px
<div class="container" style="width: 381px; height: 282px; overflow: hidden; margin-bottom: 20px; margin-top: 20px;">
<iframe id="my-iframe" src="some-link.html" style="width : 381px; height : 100%; border: 0px;"></iframe>
</div>
Вкл. some-link.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flip Ad</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html, body {
width : 100%;
height : 100%;
padding : 0px;
margin : 0px;
font-family: 'Varela Round', sans-serif!IMPORTANT;
}
</style>
</head>
<body>
<div style="background-color : orange; height : 20px; width : 370px">this div</div>
</body>
</html>
Как вы можете заметить, div имеет ширину 370px (которая немного короче, чем в iframe), но в инструментах Chrome dev он выглядит намного длиннее (мобильный просмотр).
Это нормально, если не на мобильном видении. Мне интересно, в чем здесь проблема?
Я пометил javascript и jquery, потому что я открыт, если это решение.
