最近做的微信网站有一个关于input输入框页面放大的问题。比如登录页面刚打开时正常,但用户输入信息登录时,页面就会放大。解决这个问题,首先需要在头部加一个

<meta name="viewport" content="width=720,inital-scale=1.0,user-scalable=no;">

再加一个如下的css样式:

input,input:focus,input:active{user-select: text;}

问题就解决了,有类似问题的同学可以试试。

js的解决办法:

首先在头部加一个js来获取手机的不同型号对应的并屏幕大小,然后给其加不同的meta属性。如下:

<script>
    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
       var version = parseFloat(RegExp.$1);
    if(version>2.3){
       var phoneScale = parseInt(window.screen.width)/720;
       document.write('<meta name="viewport" content="width=720, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user-scalable=no, target-densitydpi=device-dpi">');
       }else{
            document.write('<meta name="viewport" content="width=720, target-densitydpi=device-dpi">');
       }
       }else{
            document.write('<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">');
       }
</script>

其次就是需要改你的css。即将你的css中所有定了页面最大宽度的具体值全部改成100%.
这样就能解决问题了,经测试这个方法对所有常用机型都适用。

input输入内容时放大问题的更多相关文章

  1. 正则表达式控制Input输入内容 ,js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  2. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  3. IE去掉input的type=”text”输入内容时出现的X和type=”password”出现的眼睛图标

    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...

  4. IE10去掉input的type=”text”输入内容时出现的小叉号(X)和type=”password”出现的小眼睛图标

    最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...

  5. 关于隐藏input输入内容问题

    如果想通过获取焦点输入改变内容,type不能是hidden的 <input type="hidden" id="test"> // 这种是不行的,只 ...

  6. 一个input输入内容监听联动的demo

    两个input,一个在其中一个输入,内容在另一个input中实时回显 代码如下 <!DOCTYPE html> <html> <head> <title> ...

  7. input(移动端iOS)输入内容时调用软件盘后页面底部留白问题

    iOS/input输入框调用软键盘底部留白 只需input输入框失去焦点时,让页面自动下移即可恢复 <input placeholder="请输入用户名" v-model=& ...

  8. input输入中文时,拼音在输入框内会触发input事件的问题。

    问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...

  9. 限制<input>输入内容 只允许数字 或者 字母

    只能输入数字: 有回显 <input onkeyup="value=value.replace(/[^\d]/g,'')"> 只能输入数字:无回显 <input ...

随机推荐

  1. [delphi]极域学生端解除键盘鼠标锁定退出全屏广播-强制窗口化-源代码

    v2.0  2015-07-11 更新了V2.0 版本 发布在吾爱破解论坛 欢迎下载使用 http://www.52pojie.cn/thread-382769-1-1.html ---------- ...

  2. highchart访问一次后台服务返回多张图表数据

    本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与 ...

  3. jQuery multiselect的使用

    1,下载插件 https://github.com/ehynds/jquery-ui-multiselect-widget

  4. jquery写插件

    http://www.cnblogs.com/ajianbeyourself/p/5815689.html

  5. oracle 身份证校验函数

    1.正则表达式写法: CREATE OR REPLACE FUNCTION Func_checkidcard (p_idcard IN VARCHAR2) RETURN INT IS v_regstr ...

  6. 通过XmlHttpRequest实现带进度条异步下载文件

    本博文源自技术群的讨论,因为网上找不到实现这样效果的的代码,而我说没问题,可以实现,因此有人质疑我是否能做到,呵呵,现将我实现代码贴出如下,希望有兴趣的同学可以继续完善: 本代码仅做技术展现,请勿探讨 ...

  7. MM常用表

    Table 表描述 MKPF 物料凭证抬头 MSEG 物料凭证段

  8. NHibernate 映射失败 is not mapped

    1 区分大小写(实体类名) 2 MAP的XML设置为嵌入的资源 3 hibernate.cfg.xml配置添加map的程序集<mapping assembly="Model" ...

  9. JavaWeb 学习004-增删改查的编写

    完成了grade,student模块的 数据库连接部分,还需要不断重复这个过程,熟练掌握JDBC的编写. 在不断编写的过程中,加深理解代码. 下一步 1.biz层面的知识内容 2.还有就是登陆成功后跳 ...

  10. Android开发LogCat一直不停输出的解决方法

    加一个过滤器 如图,选择Saved Filter + 然后如下图: 然后再选择OK就可以啦!!!