Question

我正在尝试使用HTML 5和CSS3重新创建页面http://www.rexonmedia.com/test/sohalo/images/html5_simpletest.png但是高度有问题。我用50px测量了页脚的高度。它在常规浏览器上看起来没问题，但在移动浏览器上它看起来很小。我在这里想念的是什么是否有可在移动浏览器上正确显示的标签或等式？

HTML 测试

<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/styles.css" />

<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<header> </header>
<div id="wrap">
<div id="main"> </div>
</div>
<footer> </footer>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */



header{
    width:100%;
    height:50px;
    background-color:#113b44;
}

#wrap {
    min-height: 100%;
}

#main {

}

footer {
    position:fixed;
    bottom:0px;
    width:100%;
    background-color:#231f20;
    height:50px;
}

Answer 1

也许在CSS高度尝试pt而不是px？这是Web开发中非常常见的问题。解决方案是检测用户的屏幕分辨率并包括“移动”样式表。

如何计算移动浏览器div的高度

1 个答案: