注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 

日志

 
 
 
 

移动端输入框获取焦点后,页面放大解决方法  

2015-06-01 10:42:26|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在移动端输入框获取焦点之后,页面整体放大,然后无法通过手指缩小。
主要原因是当输入框获取焦点之后会触发webview的displaySoftKeyboard方法,这个方法会把缩小的网页恢复到正常情况(也就是说缩小的网页放大)。
具体的解决方案可以在页面的<head>标签内加入下面的代码:

<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;">

第一行代码是设置Web应用是否以全屏模式运行,如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。

第二行代码可以让网页的宽度自动适应手机屏幕的宽度。
属性: width=device-width:宽度是设备屏幕的宽度
          initial-scale=1.0:初始的缩放比例
          maximum-scale=1.0:最大的缩放比例
          user-scalable=no:用户是否可以调整缩放比例
          minimum-scale=0.5: 表示最小的缩放比例
  评论这张
 
阅读(108)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017