文章摘自：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. SQLServer 重建索引前后对比

    在做维护项目的时,我们经常会遇到索引维护的问题,通过语句,我们就可以判断某个表的索引是否需要重建. 执行一下语句:先分析表的索引 分析表的索引建立情况:DBCC showcontig('Table') ...

  2. storm实战总结笔记

    storm是一款开源的.分布式的.低延迟的.可扩展的.容错的实时计算框架,采用clojure和java的混合编程,总体两者的代码总量是55开的,但clojure语言具有很强的表现力,所以storm的核 ...

  3. stm32 串口乱码的解决

    版权声明:本文为博主原创文章. 前几天在中移物联网申请了一个迷你开发板,运行官方提供的程序,感觉板子是正常的.但是自己写的程序能够刷到板子上,但是串口却是乱码.官方和我的额程序都是用的库函数的方式写的 ...

  4. C++笔记(to be cont'd)

    最近在看这个:LearnCpp 主要是一些我自己容易忽视的地方 记一些笔记在下面,还有错漏地方请不吝赐教 CH1.10 Preprocessing The preprocessor copies th ...

  5. HTTP状态码含义

    本文内容是在有道云笔记中找到的,已不知复制自何处,抱歉 一些常见的状态代码为:200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务器暂时不可用   1xx(临时响应) 用于表 ...

  6. 郑州尚学堂：链表的C语言如何实现动态内存分配

    一.为什么用动态内存分配 但我们未学习链表的时候,如果要存储数量比较多的同类型或同结构的数据的时候,总是使用一个数组.比如说我们要存储一个班级学生的某科分数,总是定义一个float型(存在0.5分)数 ...

  7. 微信小程序官方demo学习

    最近微信小程序很火,很喜欢那种轻应用,用完就走的理念.于是,下载好微信开发者工具,学习一下官方demo. 体验下来,有类似react和vue的感觉,dom类似react那种组件的,data-bindi ...

  8. html5权威指南：标记文字、组织内容、文档分节

    HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字                 ...

  9. Java 序列化 transient关键字

    Java 序列化 transient关键字 @author 敏敏Alexia 转自:http://www.cnblogs.com/lanxuezaipiao/p/3369962.html 1. tra ...

  10. 浙江大学Pat 1036 题解

    1036. Boys vs Girls (25) This time you are asked to tell the difference between the lowest grade of ...