Я ищу способ получить отзывчивую страницу формата А4, как в этом примере: https://codepen.io/chriscoyier/pen/VvRoWy. Но вместо изменения размера компонента он будет использовать навигатор. Это действительно возможно?
Я пытался получить ответ с помощью сообщества в этих сообщениях:
Однако отзывчивый другой. Потому что мне действительно нужно сохранить формат А4 от экранов мобильных телефонов до 4K-телевизоров. Как и на любом экране, мы увидели бы целую страницу (не меньше и не больше самого экрана).
В самом последнем случае я бы использовал медиазапросы, но получение решения с JS было бы лучше. Я думаю, в некотором смысле, мне нужно получить высоту и отрегулировать масштаб, даже после того, как страница показывает экран. Но я не могу найти решение в одиночку.
Любая помощь очень приветствуется :)
Мой фактический код:
function adjustZoomLevel() {
var documentWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
// 1 cm = 37.795276px;
var zoomLevel = documentWidth / (21 * 37.795276);
// stop zooming when book fits page
if (zoomLevel >= 1) return;
document.querySelector("body").style.transform = "scale(" + zoomLevel + ")";
}
adjustZoomLevel();
window.addEventListener("resize", adjustZoomLevel);
body {
margin: 0;
padding: 0;
background: #ddd;
text-align: center;
transform-origin: top center;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
* {
box-sizing: border-box;
}
.page {
width: 21cm;
height: 29.7cm;
padding: 2cm;
margin: 1cm 0;
background: white;
box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
border: 1px #d3d3d3 solid;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
img {
width: 100%;
height: 200px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
<body>
<section id="one" class="page">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="" />
<h3>TITLE</h2>
<h3>SUBTITLE</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</section>
<section id="two" class="page">
<img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="" />
<h3>TITLE</h2>
<h3>SUBTITLE</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</section>
</body>