网站在桌面和检查元素 phone 视图中看起来不错，但在我的 iPhone XS 上却不行？
Website looks fine in desktop & inspect element phone view but not on my iPhone XS?
我为自己制作了一个作品集网站。它看起来不错，我很满意。我总是使用 chrome 的检查元素的设备工具栏（主要是 iPhone X 大小）来让所有内容看起来如何适用于各种不同的设备。当我在 iPhone XS 上打开它时，一些 div 定位、渐变颜色和对齐方式都乱七八糟。我的 header 上的 backdrop-filter 也不起作用。但是，通过 Messenger 的集成浏览器（backdrop-filter 除外）一切看起来都很好，这让我认为 Safari 一定是问题所在。我在 phone 上下载了 chrome 并遇到了完全相同的问题。有什么问题吗？这是一些兼容性问题吗？我注意到 CSS 出现了一些兼容性错误，所以我修复了它们，推送了文件并将其上传到我的服务器，但仍然没有帮助。一切看起来都很完美，并且在检查元素中可以正确缩放。
我已将@media max-width 设置为 1024px。
如果你想让元素等于屏幕的长度，使用"width: 100%;"
如果你想让宽度等于屏幕的宽度，使用"height: 100vh;"
这些只是兼容性问题。由于 Chrome 中的 inspect element 实际上并没有在 iPhone 上模拟 Safari 运行，这就解释了为什么我的 phone 中有问题但 Chrome 中没有s 检查元素移动视图。使用 caniuse.com 我发现 Safari 仅部分支持 CSS 渐变，并且在使用 transparent 标签时出现一些意外行为，这解释了为什么我的一些颜色被弄乱了。 Safari 也不喜欢 position: absolute 所以我不得不在没有它的情况下定位我的 div。 backdrop-filter 还需要 -webkit- 前缀才能工作。
我为自己制作了一个作品集网站。它看起来不错，我很满意。我总是使用 chrome 的检查元素的设备工具栏（主要是 iPhone X 大小）来让所有内容看起来如何适用于各种不同的设备。当我在 iPhone XS 上打开它时，一些 div 定位、渐变颜色和对齐方式都乱七八糟。我的 header 上的 backdrop-filter 也不起作用。但是，通过 Messenger 的集成浏览器（backdrop-filter 除外）一切看起来都很好，这让我认为 Safari 一定是问题所在。我在 phone 上下载了 chrome 并遇到了完全相同的问题。有什么问题吗？这是一些兼容性问题吗？我注意到 CSS 出现了一些兼容性错误，所以我修复了它们，推送了文件并将其上传到我的服务器，但仍然没有帮助。一切看起来都很完美，并且在检查元素中可以正确缩放。
我已将@media max-width 设置为 1024px。
如果你想让元素等于屏幕的长度，使用"width: 100%;" 如果你想让宽度等于屏幕的宽度，使用"height: 100vh;"
这些只是兼容性问题。由于 Chrome 中的 inspect element 实际上并没有在 iPhone 上模拟 Safari 运行，这就解释了为什么我的 phone 中有问题但 Chrome 中没有s 检查元素移动视图。使用 caniuse.com 我发现 Safari 仅部分支持 CSS 渐变，并且在使用 transparent 标签时出现一些意外行为，这解释了为什么我的一些颜色被弄乱了。 Safari 也不喜欢 position: absolute 所以我不得不在没有它的情况下定位我的 div。 backdrop-filter 还需要 -webkit- 前缀才能工作。