Я написал функцию JS, которая вычисляет содержимое страницы html, а затем масштабирует содержимое так, чтобы оно помещалось на экране. Проблема в том, что иногда содержимое переполняет верхнюю часть страницы, и я не могу найти способ это исправить. из-за ограничений я могу использовать только vanilla js.
jsfiddle Demo
let scale = 0.70; //70% of screen's size
function scaleMe() {
setTimeout(function() {
let x = this.document.body.getElementsByClassName("content")[0];
x.style.transform = '';
let width = x.firstElementChild.getBoundingClientRect().width;
let height = x.firstElementChild.getBoundingClientRect().height;
if ((screen.availHeight || screen.height - 30) <= window.innerHeight)
scale = (height >= width) ? 1 : .85;
else
scale = (height > 818) ? 0.6 : scale;
let theScale = (height > width) ? (((scale * this.innerHeight) - height) / height) : (((scale * this.innerWidth) - width) / width) + 1;
theScale = (theScale > 1) ? 1 : theScale; //limit the scale to 100% of its original size.
if (height > width && height > this.innerHeight && theScale < 0.3 && (screen.availHeight || screen.height - 30) <= window.innerHeight)
theScale = 0.7;
/*Added to deal with wonky Title Pages in fullscreen*/
if ((screen.availHeight || screen.height - 30) <= window.innerHeight) {
try {
if (height > this.innerHeight)
theScale = 0.75; //height is greater than window height.
if (x.firstElementChild.src.includes("TitlePage") || x.firstElementChild.src.includes("TitleCover.png"))
theScale = 1.35; //images too small
} catch (err) {
console.log("no img source on pg"); //ignore.
}
}
theScale = Math.abs(theScale); //prevent negative scale that flips img.
x.style.transform = 'scale(' + theScale + ')';
}, 60);
}
html,
body {
height: 100%;
margin: 0;
}
.body {
display: flex;
font-family: Arial, sans-serif;
justify-content: center;
align-items: center;
height: 100%;
}
p {
display: block;
margin-top: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
text-indent: 20pt;
width: max-content;
width: auto;
line-height: 1.125em;
}
.title {
font-size: 30pt;
margin-bottom: 10pt;
text-indent: 0em;
}
.list1 {
font-size: 12pt;
text-align: left;
margin-left: 18pt;
margin-top: 4pt;
text-indent: -14pt;
}
.list2 {
font-size: 12pt;
text-align: left;
margin-top: 6pt;
margin-left: 40pt;
text-indent: 0pt;
}
.bullets {
float: left;
color: red;
}
.list-item {
margin-left: 0.9em;
text-indent: initial;
}
.img {
border: 1px solid black;
}
<html>
<head>
<title>some title</title>
</head>
<body onload="scaleMe();" onresize="scaleMe();">
<div class="body">
<div class="content">
<p class="title">Title</p>
<div class="list1"><span class="bullets">•</span>
<div class="list-item">content 1</div>
</div>
<div class="list2"><span class="bullets">-</span>
<div class="list-item">list option 1</div>
</div>
<div class="list2"><span class="bullets">-</span>
<div class="list-item">list option 2</div>
</div>
<div class="list2"><span class="bullets">-</span>
<div class="list-item">list option 3</div>
</div>
<div class="list1"><span class="bullets">•</span>
<div class="list-item">content 2</div>
</div>
<div class="list2"><span class="bullets">-</span>
<div class="list-item">list option 1</div>
</div>
<div class="list2"><span class="bullets">-</span>
<div class="list-item">list option 1</div>
</div>
<p class="img">
<image src="" height="721" width="1179"></image>
</p>
</div>
</div>
</body>
</html>