剛剛纔把博客搬到這裏來，記錄一下完成2個微信公衆號項目的經驗吧css
1.作移動端的項目頁面必須用html5的標籤和知識，否則有些坑就很差解決了。
2.H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面（強制讓文檔的寬度與設備寬度保持1:1，最大寬度1.0，禁止屏幕放。）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0, user-scalable=no" />
3.忽略將頁面中的數字識別爲電話號碼
（禁止數字自動識別爲電話號碼，這個比較有用，由於一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。）
<meta name="apple-mobile-web-app-capable" content="yes" />
4.忽略Android平臺中對郵箱地址的識別
<meta name="format-detection" content="telephone=no">
* 移動端頭部設置
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title></title>
</head>
* 禁止用戶長按選中文字
html,body{
-webkit-user-select:none;
user-select:none;
}
5.響應式佈局啊，在css樣式裏用 Media Query（媒介查詢）經過不一樣的媒介類型和條件定義樣式表規則。
.remote{
position:absolute;
top:-66%;
left:34.5%;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.remote{
left:32%;
}
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.remote{
left:34.5%;
}
}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.remote{
left:35.4%;
}
}
6.webkit表單元素的默認外觀怎麼重置
.css{-webkit-appearance:none;} （ios上的下拉框會有圓角，因此要寫border-radius:0）
7.禁用 radio 和 checkbox 默認樣式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;
}
8.webkit表單輸入框placeholder的顏色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
9.手機選擇相片調用本地相冊
<input type="file" class="image_upload" accept="image/*" capture="camera" multiple="multiple"/>
可是會有一個問題存在，在Iphone7中沒法讀取本地相冊：
方法一：去掉capture屬性，可是若是去掉，Andriod手機將沒法調用相機拍照。
方法二：先判斷機型，而後若是是Andriod手機添加屬性capture。若是是ios就去掉屬性。
function getPhoneType(){
//正則,忽略大小寫
var pattern_phone = new RegExp("iphone","i");
var pattern_android = new RegExp("Android","i");
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = pattern_android.test(userAgent);
var isIphone = pattern_phone.test(userAgent);
if(isAndroid){
//capture="camera"
$('.image_grid input[type="file"]').attr('capture','camera');
}else if(isIphone){
$('.image_grid input[type="file"]').removeAttr('capture');
}
}
10.iphone手機上點擊事件不起做用
綁定的點擊事件在iphone上不起效果，安卓上都沒問題，事件能正確觸發，遇到這個問題，整我的都會崩潰的。html
開始以爲是寫法問題，後來發現，是因爲iPhone上，點擊的對象，必須加上一個樣式，擁有cursor:pointer這個樣式，就沒問題了。html5
兼容性的問題。android
11.基於rem移動端自適應解決方案
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//若是頁面的寬度超過了640px，那麼頁面中html的font-size恆爲100px，
//不然頁面中html的font-size的大小爲：100*(當前頁面寬度/640)
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
//此時1rem=100px
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);