webapp 微信开发适配问题

文章摘自：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解析移动端`

前端移动端头部分享

<meta charset="utf-8">

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="black" name="apple-mobile-web-app-status-bar-style"/>

<meta content="telephone=no" name="format-detection" />

<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--

其他的都没有问题

但是表单就是会爆出严重的问题具体解决方案如下

<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>

　　样式如下

.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体验最好安卓还行

转载于:https://www.cnblogs.com/rik28/p/5410551.html

webapp 微信开发适配问题相关推荐

微信公众开放平台开发07---java servlet 实现微信开发第一步:微信服务器验证
微信公众开放平台开发07---java servlet 实现微信开发第一步:微信服务器验证技术qq交流群:JavaDream:251572072 ------------------------- ...
那些年微信开发过的鸡肋功能，及其带给我们的思考
本文由作者"卫夕"(ID:weixizhibei)原创,作者为资深广告产品经理,致力于剖析互联网广告的基本逻辑.思路及技巧. 1.引言坐拥7亿日活的微信极其成功,有人说微信的成功 ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
php公众号获取code,微信开发系列——公众号内嵌H5页面获取code，拿到openID
如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿 ...
微信开发sdk_二次开发微信API更新日志
微信开发sdk_二次开发微信API更新日志微信开发sdk_二次开发微信API更新日志 2.6.35 清粉优化小于1k的图片发送失败的问题联系人资料新增电话号码和描述发布2.6.31->2 ...
Java微信开发之接入验证
最近在做微信开发,最开始尝试了很多次都不成功.昨天尝试成功了,还没有开始进一步开发,想把昨天尝试成功的过程记录一下.我是查了很久的资料也尝试过很多方法,现在我把我遇到的问题和解决方法记录一下.我是部署 ...
微信开发HTML5轻游戏中的几个坑
发表于2014-07-25 09:40| 2384次阅读| 来源深海的博客| 7 条评论| 作者深海游戏微信 html5 产品设计数据库微信支付微信开发者大会摘要:基于微信开发的HTML5 ...
java微信附件下载_WxJava微信开发工具包
下面我们对WxJava微信开发工具包文件阐述相关使用资料和WxJava微信开发工具包文件的更新信息. WxJava微信开发工具包 WxJava微信开发Java开发工具包(SDK),支持包括微信支付.微 ...
Java企业微信开发_00_源码及资源汇总贴
一.源码此系列教程的源码我都放在了github上,欢迎fork以及关注. 传送门:https://github.com/shirayner/WeiXin_QiYe_Demo/tree/master ...

webapp 微信开发适配问题

webapp 微信开发适配问题相关推荐

最新文章

热门文章