I have a problem with custom zoom levels in chrome and firefox:
The custom zoom level (e.g. 125%) does not stay the same when following links to subpages in chrome and firefox - but in IE it does.
In chrome and firefox it switches back to the last chosen zoom level for the subpage.
When I choose a zoom level of 125% on the main page, it should stay the same when I follow links to subpages.
How can I achieve that the zoom level chosen by the user on the main page stays the same on all subpages in chrome and firefox?
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel</title>
<link href="stylesheet.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Noticia+Text:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="bilder">
<img src="bilder_1.png" width="200px" id="bilder1">
<img src="bilder_2.png" width="200px" id="bilder2">
</div>
<div id="wrapper2">
<header id="kopfbereich">
<!-- <h1><img src="MenuLeisteV2_komp.png" width="540px" id="menuleiste"</h1> !-->
<nav>
<ul>
<li><a href= "Startseite.html">Start</a></li>
<li><a href= "Angebote.html">Angebote</a></li>
<li><a href= "Kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<div id="textfeld">
<div id="headline">
<p>Willkommen!</p>
</div>
<p id="fliesstext"><img src="bild1.png" id="foto">
Text
<br>
</p>
</div>
</main>
</div> <!-- Ende Wrapper2 -->
<footer>
</footer>
</div> <!-- Ende Wrapper -->
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
nav {
width: 540px;
height: 70px;
background: url(MenuLeisteV2_komp.png) no-repeat;
background-size: 100% 100%;
}
nav ul {
padding: 20px 20px 20px 35px;
margin: 0px auto;
}
nav ul li {
display: inline;
padding: 20px;
font-size: 1.2em;
color: white;
}
body {
background: url(hintergrund.jpg) no-repeat;
background-size: cover;
font-family: "Noticia Text", "Palatino", "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
font-size: 1em;
}
#wrapper {
width: 1000px;
margin: 0 auto;
padding: 10px 0px;
}
#wrapper2 {
width: 540px;
margin: 0 auto;
padding: 10px 0px;
}
#menuleiste {
margin: 0px auto;
}
#bilder1 {
float: left;
}
#bilder2 {
float: right;
}
#textfeld {
width: 540px;
height: 520px;
background: white;
margin: 15px auto;
border-radius: 50px;
}
#headline {
font-size: 1.2em;
color: #FAAF41;
width: 450px;
margin: 0px auto;
padding: 40px 30px 0px 30px;
}
#foto {
float: right;
margin: 10px;
width: 150px;
}
#fliesstext {
font-size: 0.8em;
width: 450px;
height: 370px;
margin: 0px auto;
padding: 15px 30px 10px 30px;
overflow: hidden;
}