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

webapp 微信开发适配问题的更多相关文章

  1. Cordova webapp实战开发：（7）如何通过简单的方法做到，不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核？

    到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...

  2. iOS WKWebview 网页开发适配指南

    iOS WKWebview 网页开发适配指南 微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配.如有问题,可参考文末联系方式,向我们 ...

  3. 移动web开发适配方案之Rem

    移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...

  4. Java企业微信开发_05_消息推送之被动回复消息

    一.本节要点 1.消息的加解密 微信加解密包 下载地址:http://qydev.weixin.qq.com/java.zip      ,此包中封装好了AES加解密方法,直接调用方法即可. 其中,解 ...

  5. Java企业微信开发_01_接收消息服务器配置

    一.准备阶段 需要准备事项: 1.一个能在公网上访问的项目: 见:Java微信公众平台开发_01_本地服务器映射外网 2.一个企业微信账号: 去注册:(https://work.weixin.qq.c ...

  6. 【微信开发】公众号后台设置错误导致的微信redirect_uri参数错误【图】

    在微信开发中,如微信网页授权登录,分享到朋友圈自定义内容,微信h5支付时 可能会遇到微信redirect_uri参数错误的情况. 此时除了检查自己代码正确性外,还要检查一下是否正确地设置了公众号后台的 ...

  7. 《C#微信开发系列（Top）-微信开发完整学习路线》

    年前就答应要将微信开发的学习路线整理给到大家,但是因为年后回来这段时间学校还有公司那边有很多事情需要兼顾,所以没能及时更新文章.今天特地花时间整理了下,话不多说,上图,希望对大家的学习有所帮助哈. 如 ...

  8. 基于fastweixin的微信开发环境搭建（一）

    由于公司业务需要,开发微信版本,才开始接触微信公众平台.在github折腾了几天,试过好几个微信sdk,最终选择fastweixin.个人觉得这个框架还是值得使用的,使用也简单.那么问题来了,很多人想 ...

  9. 微信开发笔记：获取用户openid，以及用户头像昵称等信息

    微信开发的时候有一个很便利的途径来进行一个用户的一步注册登录,就是使用用户的微信信息来直接进行登陆,可以省去很多不必要的麻烦.那具体这些信息是如何来获取的呢? 首先呢,我们需要对微信进行一个授权,让微 ...

随机推荐

  1. vg

  2. 无法创建链接服务器 "xxx" 的 OLE DB 访问接口 "OraOLEDB.Oracle" 的实例。 (Microsoft SQL Server，错误: 7302)

    出现这个错误,有两个最常见的两个原因 1.注册表 <1>按下WIN+R,打开“运行”窗口,输入“regedit”,回车 <2>在打开的注册表编辑器的左侧按如下路径依次展开: H ...

  3. read/sysread区别

    use warnings; use strict; my $readbuff; my $sysreadbuff; ); print "read get:$readbuff\n"; ...

  4. ACE Socket Wrapper Facade

    ACE Socket Wrapper Facade 1:Socket API 1.1 IPC(进程间通信) IPC分为本地IPC(同一计算机上的不同进程)和远程IPC(网络互联的不同计算机),本地IP ...

  5. java.util.Timer类似于闹钟定时做任务

    在web中实现任务计划,相当于实现闹钟的功能,要完成2个步骤: 1.定时器的设置: 2.对这个定时器的启动运行和停止进行实时监听 java.util.Timer定时器,实际上是个线程,定时调度所拥有的 ...

  6. zoj 2913 Bus Pass

    对于每个输入的站点求出所有点到这个站点的最短路.用anss数组存下来,然后就可以用anss数组求出答案了. 题目分析清楚了 还是比较水的,折腾了一早上.. #include<stdio.h> ...

  7. 《JS权威指南学习总结--6.3删除属性》

    内容要点: 一.delete运算符可以删除对象的属性.它的操作数应当是一个属性访问表达式.让人感到意外的是,delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性: delete book ...

  8. asp.net正则表达式去除a标签

    if (drr["allow_a"].ToString() == "False") { cont = dr["news_Content"]. ...

  9. [SOJ] 图的广度优先搜索

    Time Limit: 1sec    Memory Limit:256MB Description 读入图的邻接矩阵以及一个顶点的编号(图中顶点的编号为从1开始的连续正整数.顶点在邻接矩阵的行和列上 ...

  10. MySQL聚簇索引

    聚簇索引并不是一种单独的索引类型,而是一种数据存储方式.具体的细节依赖于其实现方式,但innoddb 的聚簇索引实际上在同一个结构中保存了B-Tree索引和数据行. 当表有聚簇索引时,它的数据实际上存 ...