iPhone浏览器中HTML网站的两处异常问题求助

嗨，针对你遇到的这两个iPhone浏览器上的网站问题，我给你整理了一些实用的解决思路，你可以试试看：

一、Input标签size属性不生效，依赖maxlength的问题 #

iPhone默认的Safari浏览器对input的size属性渲染逻辑和桌面端、安卓端浏览器不太一样，它不会严格按照size值来调整输入框宽度，反而会根据maxlength或者输入内容的长度来自动适配。要解决这个问题，推荐用CSS来强制控制宽度，比依赖size属性靠谱得多：

• 直接给input设置固定宽度，比如写一段CSS：

.custom-input {
  width: 220px; /* 你需要的宽度值 */
}

然后给对应的input标签加上class="custom-input"就行。

• 如果想让宽度贴合字符数量，可以用CSS的ch单位（1ch约等于一个英文字符的宽度），比如width: 18ch;，这样设置后，输入框宽度会更贴合你想要的字符显示数量，兼容性也更好。

二、滚动加载内容时页面跳回顶部的问题 #

这个情况在Safari里挺常见的，一般是加载新内容时页面布局发生了突然变化，或者JS操作中不小心影响了滚动位置。你可以试试这几个方案：

• 加载新内容前先记录当前滚动位置，加载完成后再恢复回去。比如在触发加载的代码里加：

// 加载前记录位置
const savedScroll = window.pageYOffset || document.documentElement.scrollTop;
// 这里写你的加载新内容的逻辑，比如ajax请求、插入DOM等
// 加载完成后恢复滚动位置
setTimeout(() => {
  window.scrollTo(0, savedScroll);
}, 0);

用setTimeout是为了确保DOM已经更新完成，布局稳定后再调整滚动位置，避免浏览器自动重置。

• 检查新加载的内容里有没有未设置宽高的图片，这类图片加载完成后会突然撑开高度，导致页面布局偏移，滚动位置被打乱。可以提前给图片设置好固定宽高，或者用同尺寸的占位图，避免这种突然的布局变化。
• 确认页面的滚动容器设置正确，不要有多层嵌套的overflow滚动容器，否则Safari可能会出现滚动位置计算错误的情况，尽量保持只有一个主滚动容器（比如body）。

备注：内容来源于stack exchange，提问作者Hahanap