我曾经使用html5-boilerplate开始工作,而不是从头开始创建文件。响应式网页设计非常棒。
我正在为手机开发non-responsive website和客户端需要桌面版(请记住几年前网站在移动设备上的打开方式)。
我没有让它响应,也没有在媒体查询中添加任何样式。
我在台式机上工作正常但是当我们在移动设备上看到网站(或者更少940像素宽的屏幕)时,它没有显示全宽容器的完整背景(即100%),而只显示{{3} }。
我不确定,但我认为以下代码是meta viewport存在问题:
<meta name="viewport" content="width=device-width" />
我删除了此代码并测试了网站,但问题仍然存在。请问任何人可以告诉我解决方案吗?
注意:我已经构建了大部分网站,现在我无法从头开始编写标记。
答案 0 :(得分:1)
尝试将其更改为以下内容:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
让我知道它是否有效!
答案 1 :(得分:1)
我找到了一个最简单的解决方案,它为我工作。我刚刚将以下代码添加到CSS文件中(我的媒体查询部分位于main.css底部,如果是html样板文件)。
@media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}