手機端兼容

手機端兼容性

<隨筆>手機端兼容

1、私有 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">

2、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;

3、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;
}