I am looking to implement a forced zoom out feature on a webpage, reducing the overall size to 75%. Unfortunately, I am unable to disclose the specific code as it belongs to the company I work for. Despite researching various methods online, including solutions from Stack Overflow, all attempts have negatively impacted the layout of the page. My goal is to achieve a smooth zoom similar to the browser's default zoom functionality.
The page in question contains a carousel and utilizes the Bootstrap framework. The reason for this requested zoom adjustment is due to a specific requirement from the company.
Here are some of the approaches I have attempted:
1.
window.parent.document.body.style.zoom = 0.75;
2.
zoom : 0.75; width: extend-to-zoom;
3.
transform:scale(0.75);
4.
$('body').css('zoom','80%'); /* Webkit browsers */
$('body').css('zoom','0.8'); /* Other non-webkit browsers */
$('body').css('-moz-transform',scale(0.8, 0.8)); /* Moz-browsers */