What you need to prescribe CSS in order to reduce the scale of the HTML page? In the browser, you can do this: press the CTRL and - successively. After that, the page scale will be reduced while maintaining the width of the document. This is an important point, because the solutions that I found on the Internet were scaled down and even narrowed the page in width.
I need to reduce the scale, but save the width of the page (reduce the font, for example).
This is a browser feature that is not described in the standards. Browsers are free to implement scaling as they want the left heel of the browser architect, and also take into account the preferences of the user in the settings.
Since the “unique” browser features are recognized as Universal Evil ™, scaling is not available from the zhaboscript.
Scaling can be implemented by the site itself using CSS features.
Use relative sizes for fonts ( % , em , etc.), change the size of the base font in the page root.
For the remaining elements, you can add additional styles and again, depending on the root class, change the size. For images, it would be reasonable to round the scale to round numbers like 50%, 33%, etc.
Use standard CSS transform property. You can add the transform: scale(N%) style to the root of the document, then the entire page will be scaled. Please note that no one is responsible for quality and performance.
To preserve the width of the page, it can be changed in accordance with the scale (multiplied by the reverse number, in fact).
Use the non-standard CSS zoom feature. Again, you can add zoom: N% to the root. Support is not guaranteed, does not work in all browsers.
An example of the correct way:
$(function() { var fontSize = 12; var imgScales = { small: 0.25, normal: 0.50, large: 1.00 } function setFontSize(fontSize) { var zoomLevel = 'normal'; if (fontSize <= 9) zoomLevel = 'small'; else if (fontSize >= 15) zoomLevel = 'large'; var imgScale = imgScales[zoomLevel]; $('#root').css('font-size', fontSize + 'pt'); $('#root').removeClass('zoom-small zoom-normal zoom-large'); $('#root').addClass('zoom-' + zoomLevel); $('img.scalable').each(function() { $(this).css('width', this.naturalWidth * imgScale); $(this).css('height', this.naturalHeight * imgScale); }); } $('#plus').on('click', function() { setFontSize(++fontSize); }); $('#minus').on('click', function() { setFontSize(--fontSize); }); }); #root { font: 12pt sans-serif; width: 500px; background: lightskyblue; } p { font-size: 1em; } h1 { font-size: 1.5em; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <button id="plus">+</button> <button id="minus">−</button> </p> <div id="root" class="zoom-normal"> <h1>Lorem Ipsum</h1> <p> <img class="scalable" src="http://i.imgur.com/n9t1rYZ.gif" style="float: right; width: 100px"/> 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. 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> </div> Js
a = document.getElementsByTagName('html'); a[0].style.transform = "scale(2,2)"; 
You can translate all styles from px to rem and change the scale of the entire page by changing the size of the base font. https://px2rem.ru/ here, you can convert the entire file with the styles from px to rem. Also there is a formula for resizing depending on the width of the screen using a media query.
Source: https://ru.stackoverflow.com/questions/429448/
All Articles