Question

我有一个固定在页面顶部的元素，并在水平滚动时随身携带。

但是在ios中，菜单的宽度不是视口宽度的100％。菜单宽度为900px。

问题是什么？我可以用JS设置宽度，但这不是真正的方式。在Android设备上它没关系，并且工作得很好。

＆＃13;

body
{
  padding: 0;
  margin: 0;
}

.menu
{
  position:fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: grey;
  color: #fff;
}

.content800
{
  width: 800px;
  height: 200px;
  background: green;
}

.content900
{
  width: 900px;
  height: 200px;
  background: blue;
}

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <div class='menu'>Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2</div>
  <div class="content800"></div>
  <div class="content900"></div>
</body>
</html>

＆＃13;

如何将固定菜单的宽度设置为设备屏幕的100％？

Answer 1

最有可能的原因是，由于.content800和.content900导致页面溢出，因此在使用响应式设计时，应避免设置任何超出设备分辨率的“固定”宽度，无论是纵向还是横向。您在HTML中设置了视口，但您的CSS中没有任何媒体查询。

您确实需要使用以下内容来使用媒体查询：

@media screen and (max-width: 63.9375em) {
.content800, .content900 {
    width:100%;
    }   
}

您可能需要根据自己的喜好更改63.9375em作为横向模式中的所有小型设备，肖像和平板电脑。如果这不能解决您的问题，那么您将无法附加其他内容，例如其他CSS或HTML。

Answer 2

您可以将right: 0;设置为.menu，以确保菜单涵盖整个屏幕宽度。

位置：固定和宽度100％的ios

2 个答案: