网站宽度没有正确缩小在移动设备上,元无法正常工作

时间:2015-11-27 07:58:10

标签: html css mobile width shrink

因此我建立了一个在计算机浏览器上看起来完全正常的网站,但是当在移动浏览器中打开时,特别是在iPhone上的Safari中,宽度并没有像它应该的那样缩小,虽然很大但你甚至无法缩小,即使我试图使用

中的所有元标记



<meta name = "viewport" content = "width=device-width">
&#13;
&#13;
&#13;

&#13;
&#13;
<meta name = "viewport" content = "width=1300, maximum-scale=1.0, user-scalable=yes">
&#13;
&#13;
&#13;

有没有人知道如何适应它?

这是我的html和css代码:

&#13;
&#13;
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;
&#13;
&#13;

0 个答案:

没有答案