0

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

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

我正在使用这些设置：

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

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

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

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

编辑

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

4

1 回答 1

0

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

在你的页面的头部，确保你有 

<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）

祝你好运！

于 2013-07-12T10:19:57.427 回答