移動端開發備忘

標籤：

這是一些移動端開發的備忘記錄。<meta> 元素<meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>  width：寬度（數值 / device-width）（範圍從200 到10,000，預設為980 像素）  height：高度（數值 / device-height）（範圍從223 到10,000）  initial-scale：初始的縮放比例 （範圍從>0 到10）  minimum-scale：允許使用者縮放到的最小比例  maximum-scale：允許使用者縮放到的最大比例  user-scalable：使用者是否可以手動縮 (no,yes)   WebApp全螢幕模式：偽裝app，離線應用。<meta name=“apple-mobile-web-app-capable” content=“yes” /> <!– 啟用 WebApp 全螢幕模式 –>  隱藏狀態列/設定狀態列顏色：只有在開啟WebApp全螢幕模式時才生效。content的值為default | black | black-translucent 。<meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent” />  忽略數字自動識別為電話號碼<meta content=“telephone=no” name=“format-detection” />   忽略識別郵箱<meta content=“email=no” name=“format-detection” />  添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner(如)。參考文檔<meta name=“apple-itunes-app” content=“app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>  其它<!– 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 –>  <meta name=“HandheldFriendly” content=“true”>  <!– 微軟的老式瀏覽器 –>  <meta name=“MobileOptimized” content=“320”>  <!– uc強制豎屏 –>  <meta name=“screen-orientation” content=“portrait”>  <!– QQ強制豎屏 –>  <meta name=“x5-orientation” content=“portrait”>  <!– UC強制全屏 –>  <meta name=“full-screen” content=“yes”>  <!– QQ強制全屏 –>  <meta name=“x5-fullscreen” content=“true”>  <!– UC應用模式 –>  <meta name=“browsermode” content=“application”>  <!– QQ應用模式 –>  <meta name=“x5-page-mode” content=“app”>  <!– windows phone 點擊無高光 –>  <meta name=“msapplication-tap-highlight” content=“no”>  rem單位，可以根據html來設定基準值//1rem = 10px  html { font-size: 62.5%; }   //或者通過js來算  0.0625*(640<=document.documentElement.clientWidth?640:document.documentElement.clientWidth)+“px”  js事件屬性e.changedTouches[0];  Android端有些裝置不觸發touchend事件解決辦法：document.ontouchmove = function(ev){      ev.preventDefault();  }  媒體查詢Media Query//瀏覽器寬度小於等於320的時候  @media screen and (max-width:320px) {      body{}  }  Flex布局，由於新舊屬性的關係，導致有些低版本不支援，需要全部寫出來，基本可以相容所有.page-wrap {      display: -webkit-box;      /* OLD – iOS 6-, Safari 3.1-6 */      display: -moz-box;         /* OLD – Firefox 19- (buggy but mostly works) */      display: -ms-flexbox;      /* TWEENER – IE 10 */      display: -webkit-flex;     /* NEW – Chrome */      display: flex;             /* NEW, Spec – Opera 12.1, Firefox 20+ */  }     .main-sidebar {      -webkit-box-flex: 1;      /* OLD – iOS 6-, Safari 3.1-6 */      -moz-box-flex: 1;         /* OLD – Firefox 19- */      -webkit-flex: 1;          /* Chrome */      -ms-flex: 1;              /* IE 10 */      flex: 1;                  /* NEW, Spec – Opera 12.1, Firefox 20+ */  }     改變placeholder的顏色::-webkit-input-placeholder { /* WebKit browsers */      color:#999;  }  ::-moz-placeholder { /* Mozilla Firefox 19+ */      color:#999;  }  :-ms-input-placeholder { /* Internet Explorer 10+ */      color:#999;  }  IOS中Safari設定儲存到案頭表徵圖：<link rel=“apple-touch-icon” href=“custom_icon.png”>  被點擊元素的外觀變化，比如a標籤，被點擊的時候，會出現一圈顏色，看下面的示範(用手機端查看)，第一個沒有加樣式，點擊會出現黑色背景，第二個加了樣式則沒有：-webkit-tap-highlight-color:rgba(0,0,0,0)  點擊我再點擊我input,button預設樣式清除，在是移動端，這些都預設都帶有樣式，有的圓角，陰影，加上下面的代碼即可-webkit-appearance: none;  active的bug，有時候我們需要在點擊某個元素的時候，改變自身透明度，或者顏色，這些互動很常見，可以用:active來完成，但是有些手機上不起作用，需要加上一段js：document.body.addEventListener(‘touchstart‘,function(){},false);  給overflow:auto的捲軸，添加快速滑動效果-webkit-overflow-scrolling : touch;  iOS中如何禁止使用者儲存圖片＼複製圖片-webkit-touch-callout:none  穿透絕對位置元素去觸發下面元素的某些行為pointer-events:none;  

 

移動端開發備忘