webapp 微信开发适配问题

文章摘自：http://www.cnblogs.com/oksite/p/4630462.html

前段时间由于公司要做微信app 前端主要有我一个人独立开发

分享一下自己独立开发微信app的一些经验

首先说下 适配兼容的问题；

主要的问题还是安卓手机参差不齐，每个手机都有自带一个浏览器 导致前端兼容问题很大

apple iPhone手机按照device的宽度可以做适配开发。

其次，是表单的兼容问题。

当你点击页面的时候 表单直接瞬间破坏整个页面的布局。

ok 废话不说了。自己研究出来的经验分享

/******************************************************/

设计稿设计： 强制要求宽度640px;

前端一行代码即可解决问题。就是这段代码 我整整研究了一个星期

1	<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no"><br><br>* 判断终端识别 按照640解析移动端

前端移动端头部分享

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- Mobile Devices Support end --> <meta charset="utf-8"> <!--safari私有meta标签，它表示：允许全屏模式浏览--> <meta content="yes" name="apple-mobile-web-app-capable" /> <!--iphone的私有标签，它指定的iphone中safari顶端的状态条的样式--> <meta content="black" name="apple-mobile-web-app-status-bar-style"/> <!--告诉设备忽略将页面中的数字识别为电话号码--> <meta content="telephone=no" name="format-detection" /> <!--设备1.3倍解析本网站--> <meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no"> <!--引入自定义样式区--> <link rel="stylesheet" type="text/css" href="css/style640.css" media="all"> <!--每个页面都添加 end--

其他的都没有问题

但是表单就是会爆出严重的问题 具体解决方案如下

　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!--账号绑紧start  -->    <div class="paus">      <dl style="border-bottom:1px solid #D4D4D4;">        <dt>账号</dt>        <dd>          <input type="text" placeholder="请输入宝葫炉注册邮箱号" >        </dd>      </dl>      <dl>        <dt>密码</dt>        <dd>          <input type="password" placeholder="请输入密码">        </dd>      </dl>    </div>    <div class="miles"></div>    <div class="center">      <button  style="font-size:38px; font-weight:bold;" class="ljbj">绑定</button>    </div>    <!--账号绑紧end  -->

　　样式如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

.paus {     width: 592px;     height: 218px;     border: 1px solid #D5D5D5;     border-radius: 10px;     margin: 0 auto;     margin-top: 30px; } .paus dl {     float: left;     width: 100%;     height: 109px;     overflow: hidden; } .paus dl dt {     float: left;     width: 15%;     height: 109px;     line-height: 109px;     font-size: 24px;     color: #000;     text-align: right; } .paus dl dd {     float: right;     width: 85%;     padding-top: 32px; } .paus dl dd input {     float: right;     width: 95%;     height: 47px;     overflow: hidden;     border: none;     line-height: 47px;     background: #F2F2F2;     font-size: 24px;     color: #000;     font-family: "Microsoft YaHei";     text-indent: 6px; } .paus p {     float: left;     width: 640px;     height: 30px;     line-height: 30px;     color: #F00;     font-size: 14px;     text-indent: 100px; } .help {     float: left;     width: 100%;     height: 79px;     overflow: hidden;     text-align: center;     padding-top: 90px; } .help a {     width: 90%;     height: 84px;     background: #3DB3F0;     line-height: 84px;     text-align: center;     border-radius: 10px;     font-size: 28px;     color: #FFF;     display: block;     margin: 0 auto; }

　　就是要求宽度100%布局

ok，页面完美兼容 ios体验最好 安卓还行