IOS、iPhone 移动端，表单 input 聚焦时页面放大问题？

1、IOS、iPhone 移动端，表单 input 聚焦时页面放大问题？

• 在一个企业微信（自建应用）中发现页面在利用 iPhone 11 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大。
  
• 查抄发现并没有什么特定的功能是让页面放大的，原因：苹果觉得点击输入框放大是一个“很好”的体验，就私自把页面给放大了，单纯的用 meta 禁止页面放大是没有效的，可以利用下面两种方法办理。
  

通过 mate 设置：（利用这个办理的问题）
   <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

 
拆讲授明：

• apple-mobile-web-app-capable 删除苹果的默认工具栏和菜单栏。
  
• content 默认值为 no ，即正常显示。如果设置为 yes，Web应用会以全屏模式运行，可以通过只读属性 window.navigator.standalone 来确定网页是否以全屏模式显示。
  

 
2、viewport meta 标签：

• 欣赏器的 viewport 是可以看到 Web 内容的窗口地域，通常与渲染出的页面的大小不同，这种环境下，欣赏器会提供滚动条以滚动访问所有内容。
  
• width 属性控制视口的宽度。可以像 width=600 这样设为确切的像素数，大概设为 device-width 特别值，代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。
  
• 相应的也有 height 及 device-height 属性，大概对包含基于视口高度调整大小及位置的元素的页面有效。
  

initial-scale 属性控制页面最初加载时的缩放等级，即当页面第一次 load 的时候缩放比例。
maximum-scale 属性控制允许用户缩放到的最大比例。
minimum-scale 属性控制允许用户缩放到的最小比例。
user-scalable 属性控制用户是否可以手动缩放。
3、用 JavaScript 强制修改：

 备注：未测试这种方式

1. window.onload = function () {
2.   document.addEventListener('gesturestart', function (e) {
3.     e.preventDefault();
4.   });
5.   document.addEventListener('dblclick', function (e) {
6.     e.preventDefault();
7.   });
8.   document.addEventListener('touchstart', function (event) {
9.     if (event.touches.length > 1) {
10.       event.preventDefault();
11.     }
12.   });
13.   var lastTouchEnd = 0;
14.   document.addEventListener('touchend', function (event) {
15.     var now = (new Date()).getTime();
16.     if (now - lastTouchEnd <= 300) {
17.       event.preventDefault();
18.     }
19.     lastTouchEnd = now;
20.   }, false);
21. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。