iPhone Safari浏览器输入框点击后禁止页面放大的方法

iPhone移动端Safari浏览器浏览本站网页时,点击输入框后获取到焦点页面会放大。包括搜索输入框、编辑器输入框等,体验真的非常不友好,有时甚至令人崩溃。因此必需把这个问题给处理一下,下面找到了解决此问题的方法。

先看看主题header.php原本的部分代码如下:

<meta name="viewport" content="width=device-width" />

 
我们现在要将其修改为如下代码:

<meta content="yes" name="apple-mobile-web-app-capable" />  
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />

 
其实就是修改了两行代码,但是当初修改之后chrome里出现了警告提示如下:

 
The key “inital-scale” is not recognized and ignored.

Error parsing a meta element’s content: “;” is not a valid key-value pair separator. Please use “,” instead.

 
第一个警告应该是谷歌chrome不支持“inital-scale”这个参数,这个可以忽略,因为我们这里修改针对的是移动端的参数。

第二个错误警告是由于我当初是搜索找到的资料,存在有误的符号哟!!如下,即是最后的“;”这个分号造成的。

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

 
因此我已经改正了,所以资料只能参考,最终是否对自己有用还是要自己去实践才可以证实。

代码的含义:

<meta content="yes" name="apple-mobile-web-app-capable" />  

apple-mobile-web-app-capable
移动终端浏览器的参数吧,设置Web应用是否以全屏模式运行。content为yes,Web应用会以全屏模式运行。

 

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />

这一段代码是让网页的宽度自动适应手机屏幕的宽度。

width=device-width – 宽度是设备屏幕的宽度
initial-scale=1.0 – 初始的缩放比例,初始为1.0
maximum-scale=1.0 – 最大的缩放比例,值为1.0是禁止缩放
user-scalable=no – 用户是否可以调整缩放比例

“iPhone Safari浏览器输入框点击后禁止页面放大的方法”的2个回复

  1. 这种解决方法有时候并不好用,移动端如果需要缩放页面,却无法缩放。IOS输入框只要字体大于或等于16px,点击输入框才不会放大。所以为了点击输入框不放大,还是将输入框的样式css调整为font-size:1.6rem;,这样更实际。

发表评论