修复了在移动设备/平板电脑上呈现的视差布局与检查器中不同的外观Chrome + Safari

编程问答 2022-06-11

问题描述

我正在开发一个单页年度审查网站，免费为慈善机构使用，我遵循以下布局： https://codepen.io/chen1223/full/pqZWbg

我非常小心地以响应模式检查Chrome和Safari（在Mac上为Safari），它适应性很好，可以完美地适应多种屏幕尺寸。

几天的辛苦工作使Ngrok连接了iPad和iPhone并繁荣起来-布局完全不同，无法适应。不确定在非视网膜或Android /非Apple设备上的外观（我在家中没有）。如果您在iPhone或iPad上访问上面的URL，您将看到区别，但下面的截图截然不同。

主要的视差包装器是这样的：

.parallax-wrapper {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

除非找到错误的术语并且看不到修复程序，否则我找不到任何相关信息。我觉得他们的代码可能还可以，这更像是Meta视口，还是视网膜检测和修复？我试过没有运气的实验，希望有人可能经历过这种情况并且知道...

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

parallax