APP内嵌H5点击输入框页面放大问题解决

最新推荐文章于 2024-06-19 15:08:33 发布

热心市民`

最新推荐文章于 2024-06-19 15:08:33 发布

阅读量858

点赞数 1

本文链接：https://blog.csdn.net/m0_48074947/article/details/128625171

版权

在iOS中，当input字体小于16px时，系统会自动放大页面。对于内嵌H5的APP，如果webview移除了meta标签，会导致设置失效。解决方法包括设置meta标签和使用JavaScript动态添加viewport配置，以保持页面缩放不变。

摘要由CSDN通过智能技术生成

APP内嵌H5点击输入框页面放大问题解决

原因分析

ios中默认input的字体小于16px，ios为了方便看清字，会自动放大页面，
如果是app内嵌这个h5页面，有些webview会偷偷把你meta标签给干掉，导致设置无效，所以针对这种情况，可以叫app端的同学去改，也可以自己手动用js赋上

解决方法

1 设置meta标签

2.js手动赋上

window.onload = function() {
  var script = document.createElement('meta')
  script.name = 'viewport'
  script.content = 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'
  document.getElementsByTagName('head')[0].appendChild(script)
  }

参考连接:https://www.jianshu.com/p/a1b4a89b4976