在我为API在Vue ^3.0.0中开发的一个小前端上，我遇到了一个问题，在我部署它之后，我开始收到人们的投诉，说该网站无法在移动设备上运行。我知道这一定是一场狩猎，所以我把它装在我躺在那里的iPad上，是的，它彻底摧毁了这个网站。这就是网站。我已经在iOS12.5.5设备上测试过了，这个问题也发生在iOS15.1设备上。
CSS属性，如：
width: clamp(325px, 30vmax, 575px);
height: clamp(40px, 3vmax, 57.5px);
将给出一个无效的属性值警告(并且根本不起作用(，除非我将其更改为：
min-width: 325px;
width: 30vmax;
max-width: 575px;
min-height: 40px;
height: 3vmax;
max-height: 57.5px;
我觉得这很荒谬，因为我测试过的其他浏览器都运行得很好。最大的问题是，我在字体上也使用了这些clamp函数，所以它们会永远中断。
此外，您可能会注意到，例如，搜索栏中的占位符文本根本没有以safari为中心。我把这个项目完全居中，因为字体本身偏离了中心，而且据我所知，它只在狩猎时才会中断。这是我用来居中的ccs：
input {
position: relative
}
input::placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 2px));
}
这实际上让我很沮丧，我不明白为什么一开始就有区别，为什么没有人抱怨这件事，这让我想完全取消对狩猎的支持。
编辑：
我刚刚发现这也发生在iOS版的chrome上。
据我所知，箝位问题没有很好的解决方案，但可以通过以下方式解决：
iOS设备/iOS的移动浏览器很难使用clamp方法，但有一种变通方法/回退方法，在大多数情况下都有效。对我来说，这并没有完全解决问题，因为他们在行为上并不相同。但如果你有一个箝位功能
clamp(a, b, c)
您可以使用以下方法：
max(a, min(b, c))
因此，对于宽度和高度值，请使用以下内容：
width: max(325px, min(30vmax, 575px));
width: clamp(325px, 30vmax, 575px);
height: max(40px, min(3vmax, 57.5px));
height: clamp(40px, 3vmax, 57.5px);
这也适用于其他属性，如字体
input:：占位符元素中的转换问题是我无法修复的，所以我放弃了它，即使在尝试使用之后也是如此
-o-transform: translate(-50%, -50%);