视口设置的移动设备问题

Question

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

到目前为止，我在viewstate设置方面遇到了很多麻烦。主要是在Android上，但也有一些在iPhone上。

我正在使用这些设置：     

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

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

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

任何人都知道我在这里做错了什么？

修改的

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

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

祝你好运！