So Im building a website which looks totally fine on computer browsers, but when opened in mobile browsers especially in Safari on iPhone the width doesnt shrink as it supposed to and is just huge though and you cant even zoom out, even though I tried to use all of the meta tags from
<meta name = "viewport" content = "width=device-width">to
<meta name = "viewport" content = "width=1300, maximum-scale=1.0, user-scalable=yes">Doesn anyone know how to fit it?
Here's my html and css code:
body {
background-color: #331f0e;
background-image: url(layout/background.png);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 1300px;
}
#header {
height: 667px;
margin: 0 auto;
position: relative;
width: 1300px;
}
#logo {
left: 0;
position: absolute;
top: 0;
}
#stories {
font-size: 32pt;
left: 215px;
position: absolute;
top: 615px;
z-index: 100;
}
#diary {
font-size: 32pt;
left: 437px;
position: absolute;
top: 615px;
z-index: 100;
}
#home {
font-size: 40pt;
left: 616px;
position: absolute;
top: 609px;
z-index: 100;
}
#author {
font-size: 32pt;
left: 829px;
position: absolute;
top: 615px;
z-index: 100;
}
#web {
font-size: 32pt;
left: 1048px;
position: absolute;
top: 615px;
z-index: 100;
}<!DOCTYPE html>
<html lang="sk" class="no-js">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<meta name = "viewport" content = "width=device-width">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="logo" src="layout/header.png" border="0">
<a href="stories.html" id="stories" target="update">Stories</a>
<a href="diary.php" id="diary" target="update">Diary</a>
<a href="home.html" id="home" target="update">Home</a>
<a href="author.html" id="author" target="update">Author</a>
<a href="web.html" id="web" target="update">Web</a>
</div>
<br><br><br>
</div>
