视口设置的移动问题答案

【问题标题】：mobile trouble with viewport settings视口设置的移动问题
【发布时间】：2013-07-12 18:19:57
【问题描述】：

我是第一次开发移动网站，我正在尝试创建响应式设计。

到目前为止，我在视图状态设置方面遇到了很多麻烦。大多数在 Android 上，但也有一些在 iPhone 上。

我正在使用这些设置：

我也在我的 CSS 中使用了这个（只是为了确定）： @-ms-viewport { 宽度：设备宽度； } @-o-viewport { 宽度：设备宽度； } @viewport { 宽度：设备宽度； }

它在我的 iPhone 上大部分时间都能完美运行。但有时当我更改为横向然后恢复正常时，页面的分辨率会变小。有时它保持不变（应该如此）。

在 Android 手机上，它在横向和普通模式下都能完美运行。我的问题是，有时当我刷新页面时，移动设备似乎根本没有读取视口设置。它看起来就像一个没有针对移动设备优化的普通网页。

有人知道我在这里做错了什么吗？

编辑

我还尝试添加元视口标签（我不知道为什么我的代码没有出现在这篇文章中，但这也不起作用）。

【问题讨论】：

【解决方案1】：

您可以从简化和重新检查您的代码开始。

确保在页面的头部有

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

如果有其他视口标签，请暂时删除它们。

对于 CSS 中的媒体查询，请使用

@media (max-width: 767px){     /* adjust viewport width as req'd */

.selector{ ... }

}

并删除您使用过的其他@标签（例如@-ms-viewport）

祝你好运！

【讨论】：