I wan
t to be able to make my whole website bigger and smaller depending on how big screen the user has. I have been searching like for ever for a solution, but there's not much to find.
So, one day I thought I found a solution, and it worked great in my browser, Chrome. The problem know is that I've found out this is not supported in other browsers, tested Firefox and IE 8. How is that?
This is an example of the code I'm using in the CSS file that is loaded on every page:
@media screen and (max-width: 1300px){
#html, body {
zoom: 80%;
}
}
So then I thought, maybe it's the @media that is not supported. But after some tests I now understand that zoom is the problem. Try these codes in your browsers for testing yourself:
HTML code:
<html><head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="urltowhateverpicyouhave.jpg" />
</body></html>
CSS code (test.css):
#html, body {
zoom: 50%;
}
What is the problem with other browsers!? I know IE use to be a little strange, but Firefox??
Would really appreciate any help on my problem. Also, any solution wich will make the website bigger or smaller on different screens will be really thankful.
Thanks in advanced :)