h5開發與pc開發的差異性

 

1. viewport

將layout viewport 設置成ideal viewport 。

width=device-width，也可以設置 initial-scale=1，最好兩者都有. width =device-width 兼容IE。

viewport 分為layout viewport、 visual viewport   和 ideal viewport三類。

移動設備默認的viewport是layout viewport。

layout viewport的寬度可以通過 document.documentElement.clientWidth 來獲取 。

visual viewport的寬度可以通過window.innerWidth 來獲取，瀏覽器可視區域的大小。

2. max-width 與 max-device-width 的區別 

1、max-device-width是設備整個顯示區域的寬度，例如，真實的設備屏幕寬度。

2、max-width是目標顯示區域的寬度，例如，瀏覽器寬度。

3、如果使用max-device-width，那么在PC瀏覽器上瀏覽網頁時，縮小或放大瀏覽器時是不執行CSS的，因為“PC設備”沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執行CSS的，因為“顯示區域”即瀏覽器大小發生了變化。

4、如果使用max-device-width，那么當手機由豎變橫時，CSS是不執行的，因為“手機寬度”並沒有變化。如果使用max-width，那么當手機由豎變橫時，CSS是執行的，因為“顯示區域”發生了變化。 

3. rem、em 、px

rem 相對根節點html的字體大小來計算。em 相對父節點的字體大小來計算。px 頁面按精確像素展示。

設計圖一般都是以iPhone6為標准設計，根據設計圖以rem計算好大小、間距，然后在根元素上設置 font-size= 100px,這樣便於計算。其次就是根據各個手機屏幕的大小與iphone6的大小的比率計算出font-size的值。

這樣只用寫出一套樣式就可以對應所有的手機屏幕了。

 

4.flex布局

 

 

Flexbox布局最適合應用程序的組件和小規模的布局。

5. iPhone下的默認樣式

 

 

 

-webkit-tap-highlight-color這個屬性只用於iOS (iPhone和iPad)。當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景，禁用顏色設置為0即可。

iOS下的safari中有默認的按鈕樣式：

 

 

 

6.微信分享的問題

微信分享，會自動加上一些參數：

朋友圈   from=timeline

微信群   from=groupmessage

好友分享 from=singlemessage

 

7.js獲取url

window.location.search 獲取參數部分

window.location.pathname 獲取文件地址

 

8.touch事件

//綁定屏幕上下滑動事件
var startX, startY, currentTarget;
$('.session').bind('touchstart', function (e) {
    //先觸發touch事件，然后觸發click事件 ,防止觸發手機自帶瀏覽器滾動條
    // e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX;
    startY = e.originalEvent.changedTouches[0].pageY;
    currentTarget = e.currentTarget;
});
$('.session').bind('touchmove', function (e) {
    e.preventDefault();
    const moveEndX = e.originalEvent.changedTouches[0].pageX,
            moveEndY = e.originalEvent.changedTouches[0].pageY,
            X = moveEndX - startX,
            Y = moveEndY - startY;
    if (Math.abs(X) > Math.abs(Y) && X > 0) {
        console.log("從左往右划動");
    } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        console.log("是從右往左划動");
    } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        console.log("從上往下划");
    } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        console.log("從下往上划動");
    }
});

注： touchmove事件可以禁止手機自帶瀏覽器滾動條

touchstar事件禁止的話，同時也會禁止點擊事件。