I have an HTML/CSS screen that looks/works great when full-screened on a typical laptop monitor.
However, it was built using static sizes and many-a-css/JS hack. This means that when it's opened on larger monitors it looks tiny.
On the bigger monitor, If I view it in my browser and simply zoom in twice (CTL ++) the screen looks perfect once again.
Is there a JavaScript library that controls the zoom of the browser, based on the height of the viewport?
It only needs to work for Firefox, but cross-browser would be nice.
I'm aware that that is 'hacky', but that's perfectly fine in this situation.
I don't think this would take too much coding on my part, but I'm sure there's edge cases and fiddly bits here, and I'm trying to be as hands-off with this as I possible can be. Even if it's only a 10-liner, I'd prefer a library if one exists.
Thanks a lot.
Edit: I'm looking for a JS library that does this, preferably not a function.
It's hacky and requires jQuery.. but you could use:
if ($(window).height() > 800){
$('html, body').css('transform', 'scale(2)');
}
You can find the answer in two different stackoverflow questions:
there You can find the info to build a javascript function which manipulates the zoom if needed something like:
(function(){
window.onload = InitializeWindow;
function InitializeWindow(){
var viewPort = GetWindowViewPort();
if(viewPort.width > 1400 and viewPort.height > 700) modifyWindowZoom(document.body, 200);
}
function GetWindowViewPort(){
return {
height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
};
}
function modifyWindowZoom(domElement, percentage){
domElement.style["zoom"] = percentage + "%";
}
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.