如何解决移动端H5页面点击输入框页面放大

给.html文件加上这两句:

<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 来确定网页是否以全屏模式显示。

1、viewport meta 标签:

浏览器的 viewport 是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。

width 属性控制视口的宽度。可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。

相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。

initial-scale 属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。

maximum-scale 属性控制允许用户缩放到的最大比例。

minimum-scale 属性控制允许用户缩放到的最小比例。

user-scalable 属性控制用户是否可以手动缩放。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。