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 – 用户是否可以调整缩放比例