移動端web開發2

補充

基於「入門」一文，我想再補充幾個基礎知識點，主要都是針對iOS的meta標籤：

⑴ 容許全屏瀏覽頁面的標籤：

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

⑵ safari頂端狀態欄樣式定義/隱藏：

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />  <!--隱藏狀態欄-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  <!--定義狀態欄樣式爲暗黑色-->

⑶ ios會把相似電話號碼的數字變爲可點擊並添加到電話的鏈接，咱們能夠這樣禁用它：

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

另外還有一個個性化的link標籤，它支持用戶將網頁建立快捷方式到桌面時，其圖標變爲咱們本身定義的圖標。好比手機騰訊網上的標籤：

<link rel="apple-touch-icon-precomposed" href="http://3gimg.qq.com/wap30/info/info5/img/logo_icon.png">

不過騰訊對這個png圖標的命名並不規範，常規咱們要求文件名應爲 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS會爲這個圖標自動添加圓角、陰影和高亮覆蓋層，後者則不會添加這些效果。

提高

移動端web的開發最頭疼的是viewport與常規PC頁面的不一樣，若是你的頁面是專門針對移動端開發的（特別是使用了meta標籤禁止用戶縮放），這個頭疼的程度會舒緩不少。

我的以爲，對viewport的深刻理解，也算打通入門移動web開發的任督二脈之一吧。

咱們依舊拿「移動端訪問博客園」的圖例來分析：

不少新入門移動端開發的朋友都會誤覺得上圖的綠線是窗口的寬度（$(window).width()）、紅線部分是窗口的高度（$(window).height()），但其實否則，任什麼時候候都不該該把PC瀏覽器的窗口概念跟移動端的viewport混淆在一塊兒。

那麼移動端難道沒有窗口寬高？非也，只是正確的「窗口寬高」（稱爲viewport的寬高會更靠譜些）應該是這樣的（依舊用綠線和紅線表示）：

要注意這兩個值，不管你怎麼雙指縮放頁面，它們的大小都是不會變更的（除非頁面內容發生了變化，好比動態生成了一張很大的的img撐大了頁面）。

那麼究竟一開始咱們「誤覺得」了的那個僞窗口的寬高，分別是什麼呢？

它們分別是 window.innerWidth 和 window.innerHeight —— 頁面實際可視區域所展示的像素寬值/高值：

或許你會以爲有點可笑，認爲直接稱兩者爲「頁面實際可視區域寬高」不就好了。

其實「所展示的像素」仍是不該當捨棄的，由於兩者的值是變化的，跟隨着用戶縮放頁面而變化，咱們拿window.innerWidth來示例：

除了上述的，還有一個可能有用的值，它能夠獲取設備屏幕寬高，它包含了頂端系統狀態欄、瀏覽器導航條的寬高值，它們是 screen.width 和 screen.height ：

相信你也會想到，若是咱們的頁面是專門針對移動端設計的頁面（頁面初始化鋪滿屏幕寬度，且禁用了縮放功能的移動端響應式頁面，例如手機騰訊網），那麼 $(window).width() 、window.innerWidth、screen.width 的值將是相等的（手機QQ內置瀏覽器等奇葩瀏覽器除外）。

既然說到「頁面初始化鋪滿屏幕寬度，且禁用了縮放功能」這個事，咱們再順便打個岔聊一下。其功能的實現其實就是添加「入門」一文介紹過了的meta標籤：

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

在「入門」中我也已經介紹過，除了這個標籤，咱們還應當在其下增長一行：

<meta name="MobileOptimized" content="320">

最近公司的一個移動端舊項目遇到一個挺好玩的事情跟這個有關，該項目頁面沒有添加MobileOptimized標籤，而後又使用了基於jQuery的swipe.js，而後在其它手機上都能正常顯示幻燈片：

但到了iphone 4S- 下就發生了圖片錯位的事情：

這是由於swipeJS並不會對瀏覽器窗口大小變化進行從新佈局調整（你能夠用PC訪問這裏而後縮放窗口試試），而舊版的iphone會默認把頁面作980寬度渲染，但最終以320像素寬度顯示，因此才致使了幻燈片圖片錯位的問題。

能夠得知添加 MobileOptimized 標籤，告知ios要以320像素的寬度渲染頁面也是很重要的事情。

咱們再說說手勢，有時候移動端項目不免會須要一些手勢的支持，而咱們也有一些很出衆的手勢庫（好比已經進化到2.0版本的harmmerJS）可供選擇。不過若是項目對手勢的要求不復雜，卻是不必引入額外的手勢庫，本身實現一個便可。

常規各類手勢庫都不外乎是基於一下三個事件來實現的：

ontouchstart
ontouchmove
ontouchend

顧名思義，就是觸碰開始、移動、結束時的事件。要注意jQuery對touch系列的支持略麻煩，如事件句柄應再加上一句「originalEvent」（如「e.targetTouches[0].clientX」要寫爲「e.originalEvent.targetTouches[0].clientX」），建議直接使用addEventListener來實現：

            function dragObj(obj){
                var  $obj = obj,
                     obj = obj.get(0),
                     startX,
                     startY,
                     _x,_y;
                obj.addEventListener('touchstart', function (e) {
                    startX = e.targetTouches[0].pageX;
                    startY = e.targetTouches[0].pageY;
                });
                obj.addEventListener('touchmove', function (e) {
                    
                    _x = e.targetTouches[0].pageX - startX;
                    _y = e.targetTouches[0].pageY - startY;
                    $obj.css({"left":$obj.offset().left+_x,"top":$obj.offset().top+_y});
                    startX = e.targetTouches[0].pageX;
                    startY = e.targetTouches[0].pageY;
                    e.preventDefault();
                });
            }
            
            dragObj($("div"));

如上方輕鬆實現了一個拖拽的手勢庫，其中e.targetTouches[0]表示首個觸碰點，咱們能夠經過e.targetTouches[0].pageX、e.targetTouches[0].pageY 來得到該觸點的頁面座標（相對viewport而不是屏幕可視區域），其它的相信都能看得懂也無需逐個介紹了。

要着重提醒的是，在不少移動端瀏覽器（UC啊QQ啊等）上，若是不添加 e.preventDefault() ，會致使touchmove事件僅觸發一次（原生chrome卻是沒有此問題），因此必定要在touchmove事件中加上這句代碼。

至於另外一個可能經常使用到的縮放手勢，咱們能夠經過判斷touchstart和touchend先後的window.innerWidth是否一致，若是不一致則說明頁面被縮放了。

其它經常使用api

一. 搖一搖

像淘寶的「搖一搖手機得到紅包」活動，咱們能夠經過devicemotion方法輕鬆實現，雖然event.accelerationIncludingGravity這名字長的有點誇張（但也比webGL一堆難記的api好多了）：

var mobile_motion = {
                        speed: 25,
                        x: 0, y: 0, z: 0, lastX: 0, lastY: 0, lastZ: 0
                    }

$(window).on("devicemotion", function () {
                        var acceleration = event.accelerationIncludingGravity,
                            speed = mobile_motion.speed;
                        mobile_motion.x = acceleration.x;
                        mobile_motion.y = acceleration.y;
                        if (parseInt(flag.isWave_cur) && !flag.isShow_act && (Math.abs(mobile_motion.x - mobile_motion.lastX) > speed || Math.abs(mobile_motion.y - mobile_motion.lastY) > speed)) {
                            //這裏填寫回調事件
                        }
                        mobile_motion.lastX = mobile_motion.x;
                        mobile_motion.lastY = mobile_motion.y;
                    })

經過修改speed值能夠實現調速，就是要搖多快才能觸發回調。

 

二. 翻轉屏幕

屏幕翻轉的事件更簡單，經過orientationchange方法來監聽便可：

$win.on("orientationchange", function () {
    //回調事件
})

屏幕在初始化或者翻轉後，都會有一個表明橫屏仍是豎屏的值—— window.orientation，經過判斷其值，咱們能夠得知屏幕當前狀態，甚至知道它是進行了怎樣的翻轉（好比從豎屏順時針轉90度到橫屏），關於它們的值能夠點這裏看看，本文就不具體介紹了。

暫時先寫到這邊吧，因爲近期工做忙碌都沒時間碼新文章表示抱歉，因爲以前在圖書館看了一本AJAX安全的書籍，後續還想碼一篇關於web頁面安全的總結一下，還有avalon系列的文章，但願我能有時間吧。

好了俺先下班回家去，共勉~