移动网站太宽，视口标签不起作用答案

【问题标题】：Mobile site too wide, viewport tag doesn't work移动网站太宽，视口标签不起作用
【发布时间】：2013-05-11 08:08:55
【问题描述】：

该网站有桌面版，我正在通过编辑相同的 CSS 文件制作其移动版。

我用display: none; 隐藏了许多宽/不必要的元素，并确保我在大多数元素上使用百分比宽度。

在 HTML 上，我有以下视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

...但这无济于事：移动版本在移动设备上显得太宽。用户需要放大，他/她可以水平滚动网站。显然，这是不可取的，我需要页面适合移动设备屏幕的宽度。

我错过了什么吗？顺便说一句，如果有帮助，该框架使用 Smarty。

编辑：有时，网站会根据手机屏幕调整其宽度，但这仅发生了几次，我不知道如何或为什么。

【问题讨论】：

【解决方案1】：

但是因为你不使用“媒体查询”？

例如：@media（最大宽度：480px）{ css.. }

您可以在桌面上使用媒体，而在手机上使用媒体，因此每个都有特定的 css。

【讨论】：

客户要求我通过检查用户代理来执行此操作。很遗憾，我不能使用响应式设计。
客户雇佣了you，因为you是专业人士，而不是他们。不能信任用户代理来正确识别自己，并且每次出现新的 UA 字符串列表时都必须更新。从长远来看，这需要更多的工作，需要更多的维护，并且比仅使用媒体查询更不可靠。
尝试向客户解释，客户强调他不想要响应式设计。我别无选择。

【解决方案2】：

显然，修复与视口无关。

问题是由框架集引起的。我正在研究的框架有一个奇怪的主页结构 - index.php 包含一个框架集，它加载页面的其余部分。别问我为什么，我自己也不懂。

我通过将浏览器直接重定向到网站文件解决了这个问题（避免了任何框架集）。

【讨论】：

【解决方案3】：

我在使用justify-content: center时遇到了这个问题。

我通过将overflow: hidden; 添加到添加justify-content: center 的同一个css 类来解决它；

【讨论】：