文章摘自：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. 简单封装常用js方法

    1.uploadfiy插件封装 /* 参数:uploadID:上传控件ID url:请求后台url路径   callback:回调函数 */ uploadfiy({ uploadID: $('#btn ...

  2. 对“针对接口编程，而不是针对实现编程”的理解

    今天在阅读<Head First设计模式>的时候,看到了这句话:"针对接口编程,而不是针对实现编程",第一次见到的时候,不太清楚作者想表达的意思,想着到后来看看实例就懂 ...

  3. Android中的eventBus传值

    第一步:在build.gradle中添加依赖dependencies { compile 'org.greenrobot:eventbus:3.0.0'} 第二步:创建一个 Event类: 注意:en ...

  4. java 方法学习

    手写随机代码 public class suiji{private static final int N = 200;private static final int LEFT = 40;privat ...

  5. pull类型消息中间件-消息发布者(一)

    消息集群架构 对于发送方来说的关键几要素 topic 消息的主题,由用户定义.类似于知乎的话题,Producer发送消息的时候需要指定发送到某一个topic下面,Consumer从某一个topic下面 ...

  6. 辽宁OI2016夏令营模拟T3-chess

    放棋子(chess.pas/c/cpp)题目大意现在有一个 n*m 的棋盘,现在你需要在棋盘上摆放 2n 个棋子,要求满足如下条件:1. 每一列只能有一个棋子:2. 每一行的前 xi 个格子有一个棋子 ...

  7. Token验证失败的解决方法

    Token验证失败 微信 微信公众平台开发 Token校验失败 URL Token原文 http://www.cnblogs.com/txw1958/p/token-verify.html Token ...

  8. js返回上一页并刷新代码整理

    一:JS 重载页面,本地刷新,返回上一页 复制代码 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> ...

  9. 【LeetCode】434. Number of Segments in a String

    Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...

  10. 一、什么是WCF

    注:本文为学习摘抄,原地址:http://www.cnblogs.com/iamlilinfeng/archive/2012/09/25/2700049.html 一.概述 Windows Commu ...