Question

有些日子以来，我一直在创建网页，现在我遇到了一些问题。

我正在做一些测试以验证移动设备上的行为，我注意到我的页面在从纵向更改为横向时有这种奇怪的行为，页面需要大约5秒才能正确显示，这是假设没有延迟就能提供良好的用户体验。

此外，我刚注意到我的菜单也有一种奇怪的行为，按下汉堡图标后，菜单显示大约需要2-3秒。

在做了一些测试后我觉得我发现了问题，我有这个css代码添加了社交媒体图标。

＆＃13;

.social-media-container {
  width: 300px;
  margin: 0 auto 0;
  overflow: hidden;
}
.social {
  float: left;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
}
.mail {
  background-image: url('http://placehold.it/300&text=Email');
}
.instagram {
  background-image: url('http://placehold.it/300&text=Instagram');
}
.facebook {
  background-image: url('http://placehold.it/300&text=Facebook');
}
.youtube {
  background-image: url('http://placehold.it/300&text=YouTube');
}
.twitter {
  background-image: url('http://placehold.it/300&text=Twitter');
}
.pinterest {
  background-image: url('http://placehold.it/300&text=Pinterest');
}

＆＃13;

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">

<div class="social-media-container">
  <div class="social mail"></div>
  <div class="social instagram"></div>
  <div class="social facebook"></div>
  <div class="social youtube"></div>
  <div class="social twitter"></div>
  <div class="social pinterest"></div>
</div>

＆＃13;

从我的代码中移除此CSS后，页面开始完美运行，我不明白为什么这会影响我的菜单并在更改为横向模式时延迟页面。

注意：我使用的是视口元标记。

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

我将非常感谢任何有用的答案。

从纵向更改为横向时性能不佳

0 个答案: