OStack程序员社区-中国程序员成长平台

标题: html - 为什么位置 : fixed, 宽度:100% 元素在 iOS 8 上延伸到视口(viewport)之外 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 06:07
标题: html - 为什么位置 : fixed, 宽度:100% 元素在 iOS 8 上延伸到视口(viewport)之外

我有一个固定在页面顶部的元素，当你水平滚动时会跟着你滚动，CSS很简单:

.thing {
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: #CCCCCC;
  text-align: right;
}

你可以在这里看到它:http://jsbin.com/cetutaxaju/1

在大多数浏览器上都可以正常工作，但在 iOS 8 上的 Safari 上，这个栏不是 100% 的视口(viewport)，而是 100% 的内容？! (在 iOS 7 上很好)

罪魁祸首似乎是元视口(viewport)设置:

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

当我把它们拿出来时你可以看到:http://jsbin.com/cetutaxaju/3

有谁知道为什么会发生这种情况，或者如何更好地解决它？

我需要保留视口(viewport)设置，因为没有它们，真实站点将无法正常工作。

---

Best Answer-推荐答案

您是否尝试将 user-scalable=no 添加到您的元视口(viewport)设置？即:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">

我遇到了类似的问题，并且已经为我解决了。

关于html - 为什么位置 : fixed, 宽度:100% 元素在 iOS 8 上延伸到视口(viewport)之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29343947/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4