文章摘自：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. mycat 概述

    从开始接触mycat,到现在为止也有三个多月的时间了,目前在测试环境中已经初步应用!大概可以总结一下了 mycat是一个数据库中间件,也可以理解为是数据库代理.在架构体系中是位于数据库和应用层之间的一 ...

  2. 转：jquery的live和on

    参考1,参考2 给元素绑定事件,本人用的jquery版本大多为1.7和1.8的,所以一直习惯于用live(),但是最近朋友突然问我,怎么给新生成的dom元素绑定事件,我随口回答live(),结果他给我 ...

  3. srping标签和hibernate查询

    Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. view层:    结合control层,显示 ...

  4. 【.NET】字符串处理

    类名:DealString /// 1.截取字符串,最后加3个小数点 /// 2.获得指定Url的参数的string类型值 /// 3.判断数据类型 /// 4.过滤JS标记 /// 5.获取Chec ...

  5. js中三目运算符和&& || 符的个人浅见

    这两天看到别人写的代码,感觉很牛逼,如下,大神请忽视 $(".lgn").on("click", function() { var a = {}; a.logi ...

  6. javaWEB总结(16):jsp错误页面的处理

    前言 网站上线后,jsp页面上有时会出现不友好的错误信息,我们需要展示给用户更加友好的页面.这时候要用到page标签的errorPage和isErrorPage. errorPage 指定当前页面出现 ...

  7. MVC模式学习笔记

    一.如何设计一个程序的结构,这是一门专门的学问,叫做“架构模式”(architectural pattern),属于编程的方法论. MVC模式就是架构模式的一种,我觉得它不仅适用于开发软件,也适用于其 ...

  8. hdu 1384 Intervals

    差分约束系统. 求最小值,用最长路来解决. #include<cstdio> #include<cstring> #include<cmath> #include& ...

  9. L3-007. 天梯地图

    L3-007. 天梯地图 题目链接:https://www.patest.cn/contests/gplt/L3-007 Dijstra 这题是Dijstra的变形,麻烦的是两种最短路的相同距离时的选 ...

  10. Django 过滤器

    过滤器 描述 示例 upper 以大写方式输出 {{ user.name | upper }} add 给value加上一个数值 {{ user.age | add:"5" }} ...