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 – 用户是否可以调整缩放比例
这种解决方法有时候并不好用,移动端如果需要缩放页面,却无法缩放。IOS输入框只要字体大于或等于16px,点击输入框才不会放大。所以为了点击输入框不放大,还是将输入框的样式css调整为font-size:1.6rem;,这样更实际。
前提是
html {
font-size: 62.5%;
}