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