ios viewport 自适应失效bug（ios什么区可以下载自由联合）

admin 杂七杂八

2023-02-03 0 548

背景：官网新增了注册功能，突然发现官网在ios移动端适配挺好的，但是注册功能发现在ios手机上出现了放大的现象。

注册页面放大

问题：

1. 在官网的页面效果是正常的，那么为什么注册页面就没有自动设置initial-scale以达到界面完全显示的底部呢？(通过查资料，发现ios不设置initial-scale，系统是会自动计算的[1]

。)

过程：重新布局发现还是一样的问题。（失败）猜想：放大是因为方便输入框，去掉输入框还是一样的效果。（失败）查资料：发现可以设置viewport的内容width为固定值。（成功）猜想：通过一步一步除官网的dom，来测试到底是哪个dom影响的；后面发现只保留3-4块dom就可以实现自动缩放了；进一步猜想可能是高度不够导致的？如发奇想之下，马上执行验证。先撤销第3步的修改（width=device-width），后直接增加一个高度为2000px（具体按实际情况计算）的dom，然后把内容进行定位（因为比较简单，一屏内容）。后经测试发现的确是修复成功的，也知道了原因。（成功）

总结：在做pc到移动端的适配时，发现不设置initial-scale，Android是会自动计算的，ios也会自动计算（与[1]

里面讲解的一致）。但是两者的缩放方式不一样，Android是保持纵横比缩放，使网页的长边能完全显示出来；ios是保持纵横比缩放，只保证网页的短边能完全显示出来。

修复后的效果图：