webapp 微信开发适配问题

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

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

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

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

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

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

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

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

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

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

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

<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">

* 判断终端识别 按照640解析移动端

前端移动端头部分享

<!-- 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--

其他的都没有问题

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

 <!--账号绑紧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  -->

　　样式如下

.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体验做好 安卓还行