带CSS的移动网站,但不响应屏幕尺寸?

时间:2013-06-07 21:55:07

标签: html css mobile responsive-design

我刚刚为客户完成了mobile site,我主要关注网站的轻盈和响应能力。我还没有改变网站的重定向,因为它仍然是一项正在进行的工作但是所有重要的组件都已完成。
现在,如果您在计算机中查看网站并调整浏览器大小,您将看到它如何根据视口的宽度进行更改。但我尝试在我的智能手机(三星Galaxy S2)中查看它,最后我看到整个网站都挤进了可用的视口。
为什么会发生这种情况,我该怎么做才能使它发挥作用? 非常感谢你的时间!

2 个答案:

答案 0 :(得分:5)

除非您明确指示,否则移动浏览器不会知道该怎么做。

设计响应式布局时

The viewport metatag is essential。要解决此问题,只需将以下标记添加到您网站的<head>

即可
<meta name="viewport" content="width=device-width">

如果你觉得你需要缩小一点(我个人更喜欢这个),你也可以做一些小调整以获得很酷的外观:

<meta name="viewport" content="width=device-width, initial-scale=0.7">

玩得开心,

亚当。

答案 1 :(得分:0)

检查你的CSS。你还没有关闭你的花括号。或者你有拼写错误。

/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
 padding-right: 5px;
 pading-left: 5px;
}

示例css。