Dan*_*ams 10 css browser mobile width
我想做的事情,我认为非常简单.我正在构建的网站的标题是一种纯色,需要跨越屏幕的整个宽度,无论它被浏览的是哪个浏览器.到目前为止,我创建的内容在台式机和笔记本电脑上都很棒,但是当我测试它时平板电脑或手机,标题不会一直向右.标题内的内容确实跨越了一切,这对我来说真的很困惑.我可以让标题栏跨越整个宽度的唯一方法是将position属性设置为static,这不是我对此站点所需要的,所以这对我没有任何帮助.下面是我正在使用的CSS和HTML.有人可以看看它,让我知道我错过了什么.
HTML:
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS:
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
PJ *_*net 21
这也发生在我身上.在桌面上调整大小很好,但由于我博客顶部的728px横幅,移动设备看起来很糟糕.在如此小的屏幕上放置宽横幅而不会造成问题是很困难的.如果你没有横幅,也许你有一些太宽的元素,抛弃了设计的其余部分.
这解决了这个问题:( <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />这就是<head>...</head>)
将初始比例从1.0降低,直到您的元素可以100%完全覆盖整个页面.这个比例使我的文字有点小,但Flowtype.js帮了忙.我可以选择一个较小的横幅,但我现在对这个解决方案很满意.
更新:上述解决方案并非真正与设备无关.例如,"缩放"可能在手机上看起来很棒,但在平板电脑上却太小了.你可能想要这个:
<meta name="viewport" content="width=800" />
这使您的所有设备都像800像素宽的屏幕.或者你需要的任何宽度.在我的Android手机和Nexus平板电脑上运行得非常漂亮.我认为桌面浏览器会忽略"视口"设置,这对我来说很好.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>