Hello,
My page has a resolution of 800x480. It has been designed as such. Now in Firefox (I have control over the viewers machine), I want to zoom the whole screen to 800x600. I know that there is a zoom option, but that does it proportionally (e.g. 150%). Is it possible to somehow to only stretch the 480 to 600 (a sort of a zoom).
I have a valid reason to do this and am aware of the aspect ratio issues that could arise.
Thank you for your time.
You can use:
self.resizeTo(width, height);
Although I think Firefox has a default setting in the preferences which prevents this from working.
You can do this in Firefox 3.5 (Gecko 1.9.1) using CSS3 2d transforms.
Here's an example with two DIVs where the second is stretched from 800x480 to 800x600.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
background-color: #000;
color: #fff;
}
.viewport
{
width: 800px;
height: 480px;
background-color: gold;
color: #000;
position: absolute;
left: 0px;
top: 0px;
}
.stretched
{
background-color: rgba(255, 0, 0, 0.5);
-moz-transform: scaleY(1.25);
-moz-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="viewport"><button>Normal</button></div>
<div class="viewport stretched"><br><br><button>Stretched</button></div>
</body>
</html>
See also: