HTML5移動端網頁常用知識分享

admin發表於2017-02-23
HTML網頁
本章節分享一下HTML5移動端網頁佈局常用的一些小的知識點。

需要的朋友可以做一下參考，都是一些非常基礎的東西。

一.meta標籤:

1.控制顯示區域各種屬性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">。

width：viewport的寬度。

height：viewport的高度。

initial-scale：初始的縮放比例。

minimum-scale：允許使用者縮放到的最小比例。

maximum-scale：允許使用者縮放到的最大比例。

user-scalable：使用者是否可以手動縮放。

2.IOS中Safari允許全屏瀏覽:

<meta content="yes" name="apple-mobile-web-app-capable">

3.IOS中Safari頂端狀態條樣式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">

4.IOS中Safari設定儲存到桌面圖示:

需要在網站的根目錄下存放favicon圖示，防止404請求(使用fiddler可以監聽到)

<link rel="apple-touch-icon" href="icon.png">

二.取消表單元素在點選態時的邊框以及半透明灰色背景:

[CSS] 純文字檢視 複製程式碼
input, textarea, button, a{ 
  -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

三.移除原生控制元件樣式:

[CSS] 純文字檢視 複製程式碼
input,button,textarea {
  -webkit-appearance: none;
}

四.使用rem來做響應式開發:

針對不同的裝置，對頁面rem做不同縮放:

[CSS] 純文字檢視 複製程式碼
html {
  font-size: $baseFontSize;
  @media screen and (min-width: 320px) {
    font-size: $baseFontSize*.9;
  }
  @media screen and (min-width: 360px) {
    font-size: $baseFontSize;
  }
  @media screen and (min-width: 400px) {
    font-size: $baseFontSize*1.1;
  }
}

五.定義字型:

[CSS] 純文字檢視 複製程式碼
body{
  font-family: Helvetica;
}

六.flex佈局相容性寫法:

[CSS] 純文字檢視 複製程式碼
@mixin display-flex() {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
 
// 引數：數字，預設：1
@mixin flex($value: 1) {
  -webkit-box-flex: $value;
  -webkit-flex: $value;
  flex: $value;
}
 
// 引數：數字，預設：1
@mixin order($value: 1) {
  -webkit-box-ordinal-group: $value;
  -webkit-order: $value;
  order: $value;
}
 
// 引數：row, row-reverse, column, column-reverse
@mixin flex-direction($direction) {
  @if ($direction == row) {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  } @else if ($direction == row-reverse) {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  } @else if ($direction == column) {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
  } @else if ($direction == column-reverse) {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
 
//  引數：flex-start, center, flex-end, space-between
@mixin justify-content($value) {
  @if ($value == flex-start) {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  } @else if ($value == center) {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  } @else if ($value == flex-end) {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  } @else if ($value == space-between) {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
}
 
//  引數：flex-start, center, flex-end, baseline, stretch
@mixin align-items($value) {
  @if ($value == flex-start) {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  } @else if ($value == center) {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  } @else if ($value == flex-end) {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
  } @else if ($value == baseline) {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
  } @else if ($value == stretch) {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }
}

七.移動端touch事件:

當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件

touchstart：當手指觸碰螢幕時候發生。不管當前有多少隻手指

touchmove：當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動

touchend：當手指離開螢幕時觸發

touchcancel：系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

八.click產生200-300 ms的延遲響應:

頁面js捕獲click事件的回撥函式處理，需要300ms後才生效

解決方案：

1、fastclick可以解決在手機上點選事件的300ms延遲

2、zepto的touch模組，tap事件也是為了解決在click的延遲問題

九.按鈕active態:

在iOS系統的移動裝置中，需要在按鈕元素或body/html上繫結一個touchstart事件才能啟用:active狀態

[JavaScript] 純文字檢視 複製程式碼
document.body.addEventListener('touchstart', function () { 
  //空函式即可
});

相關文章