cep none -c spl css樣式 exp 2個 obi ()

剛剛才把博客搬到這裏來，記錄一下完成2個微信公眾號項目的經驗吧

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"> 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‘); } }

移動端微信頁面兼容性問題集合