Home >Web Front-end >HTML Tutorial >怎么让手机浏览器和微信焦点在文本输入框时不自动放大页面 - 沉默的人286

怎么让手机浏览器和微信焦点在文本输入框时不自动放大页面 - 沉默的人286

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-20 16:51:071948browse

方法一:禁止页面缩放

在head标签中加入以下代码

<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"</span><span style="color: #0000ff;">></span></span>

content的解释

<span style="color: #000000;">width=device-width //宽度等于设备屏幕宽度
initial-scale=1.0  //初始缩放比例
minimum-scale=1.0  //最小缩放比例
maximum-scale=1.0  //最大缩放比例
user-scalable=no   //用户是否能进行缩放</span>

二、通过设置input的字体来阻止

<span style="color: #800000;">@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) </span>{<span style="color: #ff0000;"> select</span>:<span style="color: #0000ff;">focus, textarea:focus, input:focus { font-size: 16px !important</span>; }<span style="color: #800000;"> }</span>

浏览器也许认为,只有input中的字体大于等于16px时用户才能看得清楚。

资料引用

怎么让Android 浏览器焦点在文本输入框时不自动放大页面

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn