IOS、iPhone移动端,表单input聚焦时页面放大的解决办法 | 您所在的位置:网站首页 › 移动端element-ui › IOS、iPhone移动端,表单input聚焦时页面放大的解决办法 |
最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大。 经检查发现并没有什么特定的功能是让页面放大的,最后找到原因:苹果觉得点击输入框放大是一个“很好”的体验,就擅自把页面给放大了,单纯的用 meta 禁止页面放大是没有用的,可以使用下面两种方法解决。 通过 mate 设置:代码语言:javascript复制拆解说明: apple-mobile-web-app-capable 删除苹果的默认工具栏和菜单栏。 content 默认值为 no ,即正常显示。如果设置为 yes,Web应用会以全屏模式运行,可以通过只读属性 window.navigator.standalone 来确定网页是否以全屏模式显示。 1、viewport meta 标签:浏览器的 viewport 是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。 width 属性控制视口的宽度。可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。 相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。 initial-scale 属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。 maximum-scale 属性控制允许用户缩放到的最大比例。 minimum-scale 属性控制允许用户缩放到的最小比例。 user-scalable 属性控制用户是否可以手动缩放。 2、用 JavaScript 强制修改:代码语言:javascript复制window.onload = function () { document.addEventListener('gesturestart', function (e) { e.preventDefault(); }); document.addEventListener('dblclick', function (e) { e.preventDefault(); }); document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }); var lastTouchEnd = 0; document.addEventListener('touchend', function (event) { var now = (new Date()).getTime(); if (now - lastTouchEnd |
CopyRight 2018-2019 实验室设备网 版权所有 |