文章摘自：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體驗最好 安卓還行?

轉載于:https://www.cnblogs.com/rik28/p/5410551.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。