1、移动端适配方案为了保证h5页面在不同大小的屏幕上展示基本一致简单来说三种方案1、meta标签设置像素级别的缩放2、使用rem单位3、vw/vh参考文档超详细讲解H5移动端适配2、ios设置SF Pro Display字体不生效1字体访问限制Apple 的系统字体如 SF Pro Display在 Web 环境中不能直接通过字体名称访问。这是出于版权和安全考虑。2字体名称不准确字体名称必须与系统中安装的字体名称完全匹配包括空格和大小写才能正确应用不知道该用SF Pro Display还是SFProDisplay或者SFProDisplay-Medium项目中有些历史的组件用了这个字体我改成和他们一样的写法也不生效也不知道他们这些页面生效没。。。3webview容器中没有这个字体资源可以下载后自行引入但是这个字体有版权商业用途需收费无法通过下载解决解决方案有以下几种尝试加了个-apple-system后生效了由于本地调试看不出效果每次改了只能部署了打开手机测试所以其他方案也没尝试3、安卓/ios键盘唤起时页面表现不同1、安卓机唤起键盘时会调整视口大小页面不会自动滚动一般需要手动处理确保输入框可见2、ios机唤起键盘时视口大小不变但可见区域大小会改变页面会自动滚动使获取焦点的输入框可见keyboardWillShow 和 keyboardWillHide 事件在标准web api中是不存在在因此h5中要监听键盘事件一般使用resize 事件浏览器视口大小变化时触发仅安卓机会触发ios在键盘唤起和隐藏时不会改变视口的大小而是调整可见区域visualViewport的resize 事件ios在键盘唤起和隐藏时会触发但由于它是较新的 API可能需要考虑兼容性focusin 事件当输入框获得焦点时可能触发键盘、focusout 事件当输入框失去焦点时可能隐藏键盘主要体现在使用van-popup组件时遇到三个问题1、若直接在弹窗底部固定定位两个按钮当弹窗内容超出高度上下滑动时按钮会跟随一起滑动解决将popup设置overflow:hidden并在内容盒子和按钮盒子外层包一层超出滚动的盒子设置overflow:auto给内容部分设置定高可以解决2、键盘唤起和关闭时安卓会出现按钮飞到键盘顶部展示解决安卓通过监听resize事件对按钮进行隐藏和展示3、ios在打开键盘关闭键盘再打开键盘时可能会出现高度为80%的弹窗高度溢出变成整个页面高度解决尝试了多个可行方案暂未解决可能是因为解决1导致的van-popup出现了滚动穿透到页面现象
1、移动端适配方案为了保证h5页面在不同大小的屏幕上展示基本一致简单来说三种方案1、meta标签设置像素级别的缩放2、使用rem单位3、vw/vh参考文档超详细讲解H5移动端适配2、ios设置SF Pro Display字体不生效1字体访问限制Apple 的系统字体如 SF Pro Display在 Web 环境中不能直接通过字体名称访问。这是出于版权和安全考虑。2字体名称不准确字体名称必须与系统中安装的字体名称完全匹配包括空格和大小写才能正确应用不知道该用SF Pro Display还是SFProDisplay或者SFProDisplay-Medium项目中有些历史的组件用了这个字体我改成和他们一样的写法也不生效也不知道他们这些页面生效没。。。3webview容器中没有这个字体资源可以下载后自行引入但是这个字体有版权商业用途需收费无法通过下载解决解决方案有以下几种尝试加了个-apple-system后生效了由于本地调试看不出效果每次改了只能部署了打开手机测试所以其他方案也没尝试3、安卓/ios键盘唤起时页面表现不同1、安卓机唤起键盘时会调整视口大小页面不会自动滚动一般需要手动处理确保输入框可见2、ios机唤起键盘时视口大小不变但可见区域大小会改变页面会自动滚动使获取焦点的输入框可见keyboardWillShow 和 keyboardWillHide 事件在标准web api中是不存在在因此h5中要监听键盘事件一般使用resize 事件浏览器视口大小变化时触发仅安卓机会触发ios在键盘唤起和隐藏时不会改变视口的大小而是调整可见区域visualViewport的resize 事件ios在键盘唤起和隐藏时会触发但由于它是较新的 API可能需要考虑兼容性focusin 事件当输入框获得焦点时可能触发键盘、focusout 事件当输入框失去焦点时可能隐藏键盘主要体现在使用van-popup组件时遇到三个问题1、若直接在弹窗底部固定定位两个按钮当弹窗内容超出高度上下滑动时按钮会跟随一起滑动解决将popup设置overflow:hidden并在内容盒子和按钮盒子外层包一层超出滚动的盒子设置overflow:auto给内容部分设置定高可以解决2、键盘唤起和关闭时安卓会出现按钮飞到键盘顶部展示解决安卓通过监听resize事件对按钮进行隐藏和展示3、ios在打开键盘关闭键盘再打开键盘时可能会出现高度为80%的弹窗高度溢出变成整个页面高度解决尝试了多个可行方案暂未解决可能是因为解决1导致的van-popup出现了滚动穿透到页面现象
