Question

我的第一个响应项目，并不像我希望的那样顺利！

我已经完成了一个初始概念，断点为768和480，当我在浏览器中调整大小时，它会很好。我在智能手机上做了最后的测试，我得到了全场！

我一直在撞墙，我当然希望有人能救我出去！

您可以在此处查看此页面 - www.siphon-marketing.com/unifirst

此外，当在桌面上调整我的屏幕大小时，它会中断，但我需要在每个点刷新以强制使用某些元素......我可以采取哪种方式阻止它？

非常感谢！

Answer 1

使用元视口标记：

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

请参阅here

Answer 2

在媒体查询中，您已将.container width和.header width定义为100％。我对此并不乐观，但我认为这就是正在发生的事情。您的.container最初设置为width: 1000px;。此时，您的移动设备将此视为以桌面为中心的网页。移动浏览器在渲染大型网页时都具有不同的功能。有些人会尝试重排文字以适合您的屏幕（而其他元素处于正常的桌面位置），有些会缩小页面以适应其视口的整个宽度，而其他人则不会对其进行任何操作，因此您必须平移和缩放整个页面。

媒体查询适用于在不同大小的视口中强制响应式设计。这些样式会覆盖媒体查询之外的原始样式，但是如果移动浏览器认为页面最初为1000px，它将“扩展”为1000px。如果您的媒体查询覆盖了100％，那么浏览器可能会将其视为“100％的1000px”。

尝试在媒体查询中定义像素宽度，看看是否有帮助。如果这是准确的，我想知道你的媒体查询中是否可以这样说：

.container {
  width: 480px;
  width: 100%;
}

同样，我没有测试过这个，但这个想法听起来可能有用。我有兴趣看看这是否有帮助，所以如果你试试，请回复并告诉我。谢谢！

Answer 3

我发现有两个视口......一个覆盖另一个

响应式设计不适用于iphone

3 个答案: