视口设置的移动故障

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

到目前为止，我在viewstate设置中遇到了很多麻烦。大部分在Android上，但也有一些在iPhone上。

我使用这些设置：

而且我也是在我的CSS使用这个（只是要确定）： @ -ms视口{宽度：设备宽度; } @ -o-viewport {width：device-width; } @viewport {width：device-width; }

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

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

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

编辑

我也尝试添加的元标签视（我不知道为什么我的代码不会在这篇文章中显示出来，但是，这并不工作，要么）。

你可以参考这个问题[链接] [1] [1]：http://stackoverflow.com/questions/17147859/responsive-navigation-with-images – Ramesh

我不想为每个决议设置具体的样式正确现在。我只是希望每个移动设备都能以合适的尺寸查看网站，而不是按照标准缩小网站的尺寸。 – user2492325

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

在网页的头部确保您有

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

如果有其他视标签，删除它们现在。

对于媒体询问在你的CSS使用

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

.selector{ ... } 

}

，并删除您使用过其他@标签（例如@ -MS-视窗）

祝你好运！

2013-07-12 10:19:57

回答