手機端兼容

手機端兼容性

<隨筆> 手機端兼容

一、私有 meta 標籤

<!-- ==========================================>[強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；] -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"name="viewport">
<!-- ==========================================>[iphone設備中的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">

二、HTML5 & CSS3

• 放棄CSS float屬性：能夠直接使用display:inline-block;
• 利用CSS3邊框背景屬性： -webkit-border-image 定義按鈕樣式
• 塊級化a標籤
• 自適應佈局模式：利用百分比的自適應佈局
• 學會使用webkit-box：display:webkit-box;
• 去除Android平臺中對郵箱地址的識別：
• 去除iOS和Android中的輸入URL的控件條：setTimeout(scrollTo,0,0,0);請注意，這句代碼必須放在window.onload裏纔可以正常的工做，並且你的當前文檔的內容高度必須是高於窗口的高度時，這句代碼纔能有效的執行。
• 如何禁止用戶旋轉設備：iOS已經禁止開發者阻止orientationchange事件，可是在Android平臺，確實也是阻止不了的。
• 檢測用戶是經過主屏啓動webapp：iOS中瀏覽器直接訪問站點時，navigator.standalone爲false,從主屏啓動webapp時，navigator.standalone爲true，navigator.standalone這個屬性獲知用戶當前是不是從主屏訪問webapp的（true）。
• 關閉iOS中鍵盤自動大寫：指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。
• iOS中如何完全禁止用戶在新窗口打開頁面：-webkit-touch-callout（對 a 標籤）樣式屬性爲none來禁止iOS彈出這些按鈕。（普通的只需定義target="_self";屬性便可）
• iOS中如何禁止用戶保存圖片＼複製圖片：-webkit-touch-callout爲none也會禁止設備彈出列表按鈕，這樣用戶就沒法保存＼複製你的圖片了。（對 img 標籤）
• iOS中如何禁止用戶選中文字：-webkit-user-select設置爲none。
• iOS中如何獲取滾動條的值：經過window.scrollY和window.scrollX咱們能夠獲得當前窗口的y軸和x軸滾動條的值。
• Android中如何獲取滾動條的值：經過document.scrollTop和document.scrollLeft咱們能夠獲得當前窗口的y軸和x軸滾動條的值。
• 如何解決盒子邊框溢出：-webkit-box-sizing:border-box;
• 如何解決inline-block中的邊距：父元素設置 font-sise:0; 子元素設置 display:inline-block; display:inline; zoom:1;vertical-align:top; font-size:12px;

三、CSS3初始化

/* CSS屬性初始化 */

html, body {
  font-size: 14px;
  font-family: "Microsoft Yahei",sans-serif;  /*移動端默認的字體*/
  width: 100%;
  height: 100%;
  /* 禁用iPhone中Safari的字號自動調整 */
  -webkit-text-size-adjust: none;
}

/* 設置HTML5元素爲塊 */
::before, ::after, article, aside, details, figcaption, figure, header, footer, hgroup, menu, nav, section {
  display: block;
  /*清除移動端默認的tap點擊的高亮效果*/
  -webkit-tap-highlight-color: transparent;

  /*設置咱們全部的 寬度從border開始計算*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 設置圖片視頻等自適應調整 */
img {
    max-width: 100%;
    height: auto;
    width: auto\9;   /* ie8 */
}

.video embed, .video object, .video iframe {
    width: 100%; height: auto;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

input,textarea{
  border: 0;
  resize: none;
  outline: none;
  /*只對ios 瀏覽器  清除默認樣式*/
  -webkit-appearance: none;
}

/*清除浮動*/
.clearfix::before,
.clearfix::after{
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;

  clear: both;
}

.fl{ float: left; }
.fr{ float: right; }

/* 定義統一的背景樣式都加icon_ */
[class^="icon_"]{
  background: url("../images/sprites.png") no-repeat;
  background-size: 200px 200px;
}


/* 動畫 */
@keyframes jump {
  0%{
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
  }
  25%{
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
  }
  50%{
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
  }
  75%{
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
  }
  100%{
    transform: translateY(-300px);
    -webkit-transform: translateY(-300px);
  }
}

.jump {
  animation: jump 1s ease;
}