Issue
I made an website for an viewport 1366px*768px . Now I want that when I resize my browser then it should show same website in mobile or bigger screen without breaking design,I don't want responsive website .
Example :
- when I open website in 360px420px viewport then my website get scale down and show exact visible area as in 1366px768px without any scroll bar .
- when I open website in 2000px1000px viewport then my website get scale up and show exact visible area as in 1366px768px without any extra space .
I tried
<meta name="viewport" content="width=1366, initial-scale=1" />
const siteWidth = 1366;
const scale = screen.width / siteWidth;
document
.querySelector('meta[name="viewport"]')
.setAttribute(
'content',
'width=' + siteWidth + ', initial-scale=' + scale + ''
);
}
By using above code I am able to scale website according to the width i.e 1366px on mobile device but on changing height it is showing extra space or scroll bar at the bottom. Also it is not working in desktop.
Any good solution so that I can scale my website correctly for all viewports?
Solution
The solution down below works, but you need to consider removing scrollbars or make fine adjustments to add scrollbars to scale.
<body>
<div class="container">
<!-- All other elements should be here -->
</div>
</body>
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
.container {
width: 1366px;
height: 768px;
}
const siteWidth = 1366;
const scale = window.innerWidth / siteWidth;
document.querySelector(".container").style.transform = `scale(${scale})`;
Answered By - Bulent Answer Checked By - Clifford M. (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.