移動(dòng)網(wǎng)頁設(shè)計(jì)問題小結(jié)

Meta標(biāo)簽：

1、<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

這個(gè)想必大家都知道，當(dāng)頁面在手機(jī)上顯示時(shí)，增加這個(gè)meta可以讓頁面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽。

PS：在設(shè)置了initial-scale=1 之后，我們終于可以以1:1 的比例進(jìn)行頁面設(shè)計(jì)了。關(guān)于viewport，還有一個(gè)很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動(dòng)條，而且不是簡(jiǎn)單的”隱藏滾動(dòng)條”，是根本沒有這個(gè)功能。iphone 的safari 瀏覽器實(shí)際上從一開始就完整顯示了這個(gè)網(wǎng)頁，然后用viewport 查看其中的一部分。當(dāng)你用手指拖動(dòng)時(shí)，其實(shí)拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動(dòng)條，交互事件也跟普通桌面不一樣

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

2、<meta content="email=no" name="format-detection" />

這兩個(gè)屬性分別對(duì)ios上自動(dòng)識(shí)別電話和android上自動(dòng)識(shí)別郵箱做了限制。

獲取滾動(dòng)條的值：

1、window.scrollY  window.scrollX

桌面瀏覽器中想要獲取滾動(dòng)條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會(huì)發(fā)現(xiàn)這兩個(gè)屬性是未定義的，為什么呢？因?yàn)樵趇OS中沒有滾動(dòng)條的概念，在Android中通過這兩個(gè)屬性可以正常獲取到滾動(dòng)條的值，那么在iOS中我們?cè)撊绾潍@取滾動(dòng)條的值呢？就是上面兩個(gè)屬性，但是事實(shí)證明android也支持這屬性，所以索性都用woindow.scroll.

禁止選擇文本：

1、-webkit-user-select:none

禁止用戶選擇文本，ios和android都支持

屏蔽陰影：

1、-webkit-appearance:none

親測(cè)，可以同時(shí)屏蔽輸入框怪異的內(nèi)陰影，解決iOS下無法修改按鈕樣式，測(cè)試還發(fā)現(xiàn)一個(gè)小問題就是，加了上面的屬性后，iOS下默認(rèn)還是帶有圓角的，不過可以使用 border-radius屬性修改。

 css之border-box：

element{

        width: 100%;

        padding-left: 10px;

        box-sizing:border-box;

        -webkit-box-sizing:border-box;

        border: 1px solid blue;

}

那我想要一個(gè)元素100%顯示，又必須有一個(gè)固定的padding-left／padding-right，還有1px的邊框，怎么辦？這樣編寫代碼必然導(dǎo)致出現(xiàn)橫向滾動(dòng)條，腫么辦？要相信問題就是用來解決的。這時(shí)候偉大的css3為我們提供了box-sizing屬性，對(duì)于這個(gè)屬性的具體解釋不做贅述（想深入了解的同學(xué)可以到w3school查看，要知道自己動(dòng)手會(huì)更容易記憶）。讓我們看看如何解決上面的問題：

css3多文本換行：

p {

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

Webkit支持一個(gè)名為-webkit-line-clamp的屬性，參見連接，也就是說這個(gè)屬性并不是標(biāo)準(zhǔn)的一部分，可能是Webkit內(nèi)部使用的，或者被棄用的屬性。需要注意的是display需要設(shè)置成box，-webkit-line-clamp表示需要顯示幾行。

Retina屏幕高清圖片：

selector {

  background-image: url(no-image-set.png);

  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;

}

image-set的語法，類似于不同的文本，圖像也會(huì)顯示成不同的：

 不支持image-set：在不支持image-set的瀏覽器下，他會(huì)支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；

 支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時(shí)瀏覽器會(huì)選擇image-set中的@1x背景圖像；

 Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時(shí)瀏覽器會(huì)選擇image-set中的@2x背景圖像。

 監(jiān)聽link標(biāo)簽加載css：

var checkProCss = function(){

        var intervalFlag;

        var timeoutFlag;

        var body = $('#js_bar_main');

        try {

            intervalFlag = setInterval(function(){

                if (body.css('cursor') == 'none') {//getComputedStyle

                    clearInterval(intervalFlag);

                    clearTimeout(timeoutFlag);

                }

            }, 200);

            timeoutFlag = setTimeout(function(){

                clearInterval(intervalFlag);

                clearTimeout(timeoutFlag);

                Q.monitor(466101);//pro.css沒有拉取成功

            }, 6000);//timeout為6s

        } catch(e){

            clearInterval(intervalFlag);

            clearTimeout(timeoutFlag);

        }

    };

移動(dòng)端檢測(cè)css是否加載完畢，由于

監(jiān)聽link.load

監(jiān)聽link.addEventListener(‘load’, loadHandler, false);

監(jiān)聽link.onreadystatechange

在不同機(jī)型上兼容性不同，所以可以利用輪訓(xùn)來檢測(cè)一個(gè)dom的css樣式來判斷，如上代碼，在css里定義了一個(gè)cursor為none，如果這個(gè)css加載失敗就會(huì)返回默認(rèn)的cursor為auto，如果成功就返回css里定義的none。

html5重力感應(yīng)事件：

if (window.DeviceMotionEvent) {

                 window.addEventListener('devicemotion',deviceMotionHandler, false);  

        }

        var speed = 30;//speed

        var x = y = z = lastX = lastY = lastZ = 0;

        function deviceMotionHandler(eventData) {  

          var acceleration =event.accelerationIncludingGravity;

                x = acceleration.x;

                y = acceleration.y;

                z = acceleration.z;

                if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {

                    //shake

                    alert(1);

                }

                lastX = x;

                lastY = y;

                lastZ = z;

        }

關(guān)于deviceMotionEvent是HTML5新增的事件，用來檢測(cè)手機(jī)重力感應(yīng)效果具體可參考

http://w3c.github.io/deviceorientation/spec-source-orientation.html