tips 前端 各個設備的頁面尺寸的media query 與頁面高度的經驗總結

有段時間 撲了一個多月的在一個wifi的前端項目上

快做完時 各種小問題一堆一堆的修復 處理了一些很零散的問題

因為頁面有一個所有頁面都有一個背景色 有的頁面有背景圖

主要重點是移動前端的方向 因為現在設備會有各種屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio)

對於頁面適配起來 其實有很多值得思考的對方

頁面寬度上的處理很方便 可以用百分比的html body樣式 或者 我使用了bootstrap 用它非常優秀的柵格化 和斷點

 頁面高度上 我自己定了一套方案 雖然在我看來這套方案還有待提高 比如沒有考慮橫屏情況,還有一些細節上深入的東西可以去探究
不過工作進度要緊 你可以沒完沒了的死磕一個東西 去挖知識 去深入探究 但是你不能用沒完沒了的工作態度去處理一個項目 而滯留在每個點上,時間是寶貴的,不能隨便浪費.

於是我在項目里是這樣做的 用一下media query 由於只是定一下高度 所以我將媒體查詢放在了引入的css文件里 沒有用在引入樣式文件時媒體查詢的方式

由於它是通用定制多個視圖的 所以將這部分放在了模板頁里去引入的一個外部css文件里

/*為大屏幕設備 pc */
@media all and (min-width: 1020px){
    .wrap_backgd_size{
        min-height: 770px;
    }
}
/*for tablet*/
@media all and (max-width: 800px){
    
.wrap_backgd_size{
    min-height: 580px;
}

}
    /*頁面高度定制*/
/*for iphone4 it ratio is  320x480*/
@media all and (max-width: 330px) and (max-height: 490px) and (min-height: 470px){
    /*.testmedia{
        color: white;
    }*/
    .wrap_backgd_size{
        min-height: 485px ;
    }
}

/*for iphone 5 it ratio is 320x568*/
@media all and (max-width: 330px) and (max-height: 570px) and (min-height: 560px){
    .wrap_backgd_size{
        min-height: 580px ;
    }
}


/*for iphone 6 it ratio is 375x667*/
@media all and (max-width: 380px) and (max-height: 670px) and (min-height: 660px){
    .wrap_backgd_size{
        min-height: 680px ;
    }
}

/*for iphone6 plus it ratio is 414x736*/
@media all and (max-width: 420px) and (max-height: 740px) and (min-height: 730px){
    .wrap_backgd_size{
        min-height: 750px ;
    }
}

/*for google nexus5 it ratio is 360x640 nexus4=384x640*/
@media all and (max-width: 385px) and (min-width: 350px) and (max-height: 650px) and (min-height: 630px){    
    .wrap_backgd_size{
        min-height: 650px;
    }
}

 

代碼貼在這里,以后可以自己再編輯改善和拿來即用

note:1.媒體查詢對同一樣式的規則應用原則是和css樣式應用的優先級是相同的  寫在后面的樣式會覆蓋前面樣式

 

　　　2.自然是使用min-height屬性,定一個最小高度,可以讓內容超出該區域

 

除了css 的方式外,還有以腳本來做用腳本來獲取當前手機的屏幕上網頁可視區域的大小,並設置到相應的dom 元素上 ,如

$('#bg').height(window.innerHeight);

相關參數:

 window.screen.width  //設備屏幕視口寬度 iphone5上320 我的安卓設備上取到了1080(此設備屏幕分辨率為1920X1080)

 window.screen.availWidth  //測試結果同上 1080  

 window.innerWidth // 正確 同理高度也應取此參數 網頁在設備上展示的可視區域的寬高 (比如在微信里展示時會拿到的高度是 去掉了手機頂部的時間欄和微信頂部欄64px后的高度)  的innerHeight

 document.body.clientWidth;  //測試結果總是幾乎同上,但總會比上面的多5像素,差距很小

//note: 這些參數在pc端chrome瀏覽器里使用f12手機設備尺寸模擬調試時總會拿到正確的參數,但在不同的實際設備上卻完全不對,所以不可以pc端模擬設備取到的參數為准