如何在 iPhone 上“隐藏”屏幕外的内容？

Question

我正在构建一个响应式网络应用程序，它的移动/瘦身部分隐藏了屏幕外的各种面板。我发现将这些项目放置在右侧，即left: 100%“隐藏”并不能正确隐藏该项目，因为即使它位于 html 和 body 区域之外，移动 safari 仍会显示它。

我想通过添加这个类来滑动这些隐藏的项目：.focused（使用 jQuery 点击事件），它将left 的值更改为0。该类应用了一个 CSS 变换，它也处理动画。

在测试时，我发现将隐藏面板放置在左侧可以正常工作。

谁能为我提供更好的解决方案？我真的需要将隐藏的内容放在右侧。

这里有一些 CSS 可以告诉你发生了什么：

#hidden-item {
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}


#hidden-item.focused {
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

Answer 1

我知道这篇文章已经很老了，但我最近遇到了同样的问题。我使用视口元数据标签来处理这个问题，使用固定宽度。还可以通过 CSS 中的媒体查询应用固定宽度和 overflow-x: hidden 到正文，可能会有所帮助。

<meta name="viewport" content="width=960; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;">

希望这对某人有所帮助。

Answer 2

从外观上看，您已经快到了。您需要确保#hidden-item 的父元素具有宽度设置和位置：固定或绝对。

看看这个 jsfiddle 稍微修改了你的 css：http://jsfiddle.net/HNrCD/2/