因此我建立了一个在计算机浏览器上看起来完全正常的网站,但是当在移动浏览器中打开时,特别是在iPhone上的Safari中,宽度并没有像它应该的那样缩小,虽然很大但你甚至无法缩小,即使我试图使用
中的所有元标记
<meta name = "viewport" content = "width=device-width">
&#13;
到
<meta name = "viewport" content = "width=1300, maximum-scale=1.0, user-scalable=yes">
&#13;
有没有人知道如何适应它?
这是我的html和css代码:
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;
}
&#13;
<!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>
&#13;