移動端web筆記整理

最後更新：2016-01-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

目錄·meta基礎知識

> H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面
> 禁止將頁面中的數字識別為電話號碼
> 禁止Android平台中對郵箱地址的識別
> 將網站添加到主畫面快速啟動方式，僅針對ios的safari頂端狀態條的樣式
>viewport模板

·問題總結

> 移動端字型定義
> 移動端click螢幕產生200-300ms的延遲
> webkit表單元素的預設面板怎麼重設
> webkit中placeholder的顏色設定
> 禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
> 禁止ios和android使用者選中文字
> 打電話發簡訊寫郵件怎麼實現
> fixed(固定定位) bug
> 移動端按鈕hover效果類比
> 重設webkit表單預設樣式
> 禁用元素被點擊產生的陰影或邊框
> iscroll4捲動區域中select,input,textarea元素無法點擊的bug修複
> zepto.js中tap使用 e.stopPropagation() 阻止事件冒泡無效

·文章

> 文本溢出省略
> 移動web相簿
> 移動web相簿——css3進度條

·常用架構

> iscroll.js
> zepto.js
> 滑屏架構

meta基礎

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

禁止將頁面中的數字識別為電話號碼

<meta name="format-detection" content="telephone=no" />

禁止Android平台中對郵箱地址的識別

<meta name="format-detection" content="telephone=no" />

將網站添加到主畫面快速啟動方式，僅針對ios的safari頂端狀態條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black" ><!-- 可選default、black、black-translucent -->

viewport模板

<!DOCTYPE html><html>head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title></head><body>內容</body></html>

問題總結

移動端字型定義

情境描述: 手機系統ios,android等是不支援微軟雅黑字型

解決方案一:@font-face定義為微軟雅黑字型並存放到web伺服器上

@font-face {        font-family: ‘MicrosoftYaHei‘;        src: url(‘MicrosoftYaHei.eot‘); /* IE9 Compat Modes */        src: url(‘MicrosoftYaHei.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */        url(‘MicrosoftYaHei.woff‘) format(‘woff‘), /* Modern Browsers */        url(‘MicrosoftYaHei.ttf‘)  format(‘truetype‘), /* Safari, Android, iOS */        url(‘MicrosoftYaHei.svg#MicrosoftYaHei‘) format(‘svg‘); /* Legacy iOS */        }        <!-- 缺點：消耗使用者的流量，頁面的開啟速度造成了延遲 -->

解決方案二：手機端無需定義中文字型，使用系統預設，英文字型和數字字型可以使用Helvetica(三種系統都支援)

body{font-family:Helvetica;}        <!-- 缺點:自然是字型上就不能保證和設計圖字型一直 -->

移動端click螢幕產生200-300ms的延遲

解決方案：
(1)fastclick.js
(2)zepto的tap事件也是為瞭解決click的延遲問題

webkit表單元素的預設面板怎麼重設

-webkit-appearance:none;

webkit中placeholder的顏色設定

input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

-webkit-touch-callout: none;

禁止ios和android使用者選中文字

-webkit-user-select:none;

打電話發簡訊寫郵件怎麼實現

<!-- 打電話 --><a href="tel:13127995008">打電話給:13127995008</a><!-- 發簡訊  winphone系統無效--><a href="sms:13127995008">發簡訊給: 13127995008</a><!-- 寫郵件 --><a href="mailto:[email protected]">[email protected]</a>

fixed(固定定位) bug

情境描述：
    (1)ios下fixed元素容易出現錯位，軟體盤彈出時，影響fixed元素定位
    (2)android 下fixed表現要比ios好點,軟體盤彈出時,不會影響fixed元素定位
    (3)ios4下不支援position：fixed

解決方案：可用iscroll.js

移動端按鈕hover效果類比

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><style type="text/css">.btn_black{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #000;}.btn_black_hover{background-color: #555;}</style></head><body><div class="btn_black">按鈕</div><script type="text/javascript">   var btnBlue = document.querySelector(".btn_black");   btnBlue.ontouchstart = function(){   this.className = "btn_black btn_black_hover";}   btnBlue.ontouchend = function(){   this.className = "btn_black";}</script></body></html>

重設webkit表單預設樣式

-webkit-appearance:none;

禁用元素被點擊產生的陰影或邊框

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

iscroll4捲動區域中select,input,textarea元素無法點擊的bug修複

原因：iScroll4要監聽整個頁面事件,為了達到最優效果，它預設禁用了所有元素的預設事件(a標籤除外),造成這些表單元素點擊沒有反應，無法正常聚焦

解決方案1：
在iScroll.js中找到：onBeforeScrollStart : function(e){ e.preventDefault(); }

替換為：onBeforeScrollStart : function(e){var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ”);if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}}

上述方案只能讓input,textarea可以正常點擊，但是對select任然沒有效果 解決方案2：
將useTransform：true; //iscorll預設滾動模式是使用transform;

改為useTransform: false; //使用定位方式實現滾動

zepto.js中tap使用 e.stopPropagation() 阻止事件冒泡無效

<div class="li_item"><span class="mypoto_cur"></span></div>$(‘.myphoto_list‘).delegate(‘.li_item‘,‘tap‘,function(e){if(!$(e.target).hasClass("mypoto_cur")){            ....//加入一層判斷         }});

常用架構

iscroll.js

解決頁面不支援彈性滾動，不支援fixed引起的問題

實現下拉重新整理,滑屏，縮放等功能

官網：http://cubiq.org/iscroll-5

iscroll4捲動區域中select,input,textarea元素無法點擊的bug修複

zepto.js

文法與jquery幾乎一樣，會jquery基本會zepto(jquery精簡版,減少檔案大小，提升頁面載入速度)

官網：http://zeptojs.com/

中文(非官網):http://www.css88.com/doc/zeptojs_api/

滑屏架構

適合上下滑屏，左右滑屏等

iSlider.js https://github.com/peunzhang/iSlider

swiper.js(中文網) http://www.swiper.com.cn/

移動端web筆記整理

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

移動端web筆記整理

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support