标签：
前段时间由于公司要做微信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体验做好 安卓还行
标签：
原文地址：http://www.cnblogs.com/oksite/p/4630462.html
