文章摘自：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体验最好 安卓还行