文章摘自：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. PHP之APC缓存详细介绍(学习整理)

    APC的介绍 The Alternative PHP Cache (APC) is a free and open opcode cache for PHP. Its goal is to provi ...

  2. 绿色astah简体中文版6.8

    astah是一个UML建模的好工具,绿化后,现在开始将它汉化. 欢迎大家提出汉化翻译不当的地方,在本帖子留言. 需要汉化的内容较多,我会逐渐发布汉化更完全的版本. 说明:astah6.8需要使用jre ...

  3. PLSQL 几种游标的用法

    分类: Oracle 1. PL/SQL里的游标可以分为显式和隐式两种,而隐式有分为select into隐式游标和for .. in 隐式游标两种.所以,我们可以认为,有3种游标用法: A. 显式游 ...

  4. 【.NET】转载：使用FileStream批量上传文件。

    先看效果图: 代码(没什么难度的一个案例,进度条为第三方控件ProgressODoom.dll,自己去网上下.) using System; using System.Collections.Gene ...

  5. SpringMVC之ModelAndView的简单使用

    可以使用ModelAndView来跳转页面和传值,具体用法如下: 构造方法的参数是要跳转的页面! 通过 ModelAndView 的对象的 AddObject(K,V)方法,可以传入数据! 获得mod ...

  6. 《JS权威指南学习总结--8.8.4 记忆函数》

    内容要点:   可以将上次的计算结果缓存起来.在函数式编程当中,这中缓存技巧叫做 "记忆". 需要注意的是,记忆只是一种编程技巧,本质上是牺牲算法的空间复杂度以换取更优的时间复杂度 ...

  7. JavaScript的正则表达式

    1.文本框只能输入数字(不包括小数点) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpas ...

  8. Linux压缩与解压缩

    .tar.gz 和 .tgz解压:tar zxvf FileName.tar.gz [-C Dir] 中括号中的内容可以省略.压缩:tar zcvf FileName.tar.gz DirName . ...

  9. jxls导出EXCEL模板

    http://jxls.sourceforge.net/ InputStream templateInput = null; InputStream in = null; OutputStream o ...

  10. BASE1(matlab)

    version memory clc clear tab键 F5键  运行m文件 F9键  只运行选中的 Ctrl+R  注释 Ctrl+T  反注释 Ctrl+I   格式化代码 edit xxx. ...