如何在iPhone屏幕上“隱藏”內容？

Question

我正在構建一個響應式Web應用程序，其中移動/瘦小的部分隱藏了屏幕上的各種面板。 我發現將這些物品放在右側即left: 100% '隱藏'並不能正確隱藏物品，因為即使它位於html和body區域之外，移動野生動物園仍會顯示它。

我想通過添加這個類來滑動這些隱藏的項目： .focused （使用jQuery click事件），它將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/