带有 CSS 的移动网站，但不响应屏幕大小？答案

【问题标题】：Mobile website with CSS, but doesn't respond to screen size?带有 CSS 的移动网站，但不响应屏幕大小？
【发布时间】：2016-04-12 16:14:27
【问题描述】：

我刚刚为客户完成了mobile site，我主要关注网站的轻便性和响应性。我还没有进行网站重定向，因为它仍在进行中，但所有重要组件都已完成。
现在，如果您在计算机中查看网站并调整浏览器大小，您将看到它如何根据视口的宽度发生变化。但我尝试在我的智能手机（三星 Galaxy S2）中查看它，结果发现整个网站都挤进了可用的视口。
为什么会发生这种情况，我该怎么做才能让它发挥作用？非常感谢您的宝贵时间！

【问题讨论】：

你在代码中放了视点元标记吗？
没有.. 没有添加任何内容。这是我唯一缺少的吗？
视口将强制缩放。您还可以设置范围并打开和关闭用户的缩放功能。
我的想法是您的滑块没有响应。您的其余内容似乎可以很好地扩展。
你通常想要的是祝你好运！

标签： html css mobile responsive-design

【解决方案1】：

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

The viewport metatag is essential 在设计响应式布局时。要解决此问题，只需将以下标签添加到您网站的<head>：

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

如果你觉得你需要再缩小一点（我个人更喜欢这个），你也可以做一些小的调整来获得更酷的外观：

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

玩得开心，

亚当。

【讨论】：

【解决方案2】：

检查您的 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。

【讨论】：