文章摘自：http://www.cnblogs.com/oksite/p/4630462.html

前段時(shí)間由于公司要做微信app 前端主要有我一個(gè)人獨(dú)立開發(fā)

分享一下自己獨(dú)立開發(fā)微信app的一些經(jīng)驗(yàn)

首先說下 適配兼容的問題；

主要的問題還是安卓手機(jī)參差不齊，每個(gè)手機(jī)都有自帶一個(gè)瀏覽器 導(dǎo)致前端兼容問題很大

apple iPhone手機(jī)按照device的寬度可以做適配開發(fā)。

其次，是表單的兼容問題。

當(dāng)你點(diǎn)擊頁面的時(shí)候 表單直接瞬間破壞整個(gè)頁面的布局。

ok 廢話不說了。自己研究出來的經(jīng)驗(yàn)分享

/******************************************************/

設(shè)計(jì)稿設(shè)計(jì)： 強(qiáng)制要求寬度640px;

前端一行代碼即可解決問題。就是這段代碼 我整整研究了一個(gè)星期

1	<meta name="viewport"?content="target-densitydpi=device-dpi, width=640px, user-scalable=no"><br><br>* 判斷終端識別 按照640解析移動(dòng)端

前端移動(dòng)端頭部分享

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- Mobile Devices Support end --> <meta charset="utf-8"> <!--safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽--> <meta content="yes"?name="apple-mobile-web-app-capable"?/> <!--iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式--> <meta content="black"?name="apple-mobile-web-app-status-bar-style"/> <!--告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼--> <meta content="telephone=no"?name="format-detection"?/> <!--設(shè)備1.3倍解析本網(wǎng)站--> <meta name="viewport"?content="target-densitydpi=device-dpi, width=640px, user-scalable=no"> <!--引入自定義樣式區(qū)--> <link rel="stylesheet"?type="text/css"?href="css/style640.css"?media="all"> <!--每個(gè)頁面都添加 end--

其他的都沒有問題

但是表單就是會(huì)爆出嚴(yán)重的問題 具體解決方案如下

　

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體驗(yàn)最好 安卓還行?

轉(zhuǎn)載于:https://www.cnblogs.com/rik28/p/5410551.html

總結(jié)

以上是生活随笔為你收集整理的webapp 微信开发适配问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。