tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结

有段时间 扑了一个多月的在一个wifi的前端项目上

快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题

因为页面有一个所有页面都有一个背景色 有的页面有背景图

主要重点是移动前端的方向 因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio)

对于页面适配起来 其实有很多值得思考的对方

页面宽度上的处理很方便 可以用百分比的html body样式 或者 我使用了bootstrap 用它非常优秀的栅格化 和断点

 页面高度上 我自己定了一套方案 虽然在我看来这套方案还有待提高 比如没有考虑横屏情况,还有一些细节上深入的东西可以去探究
不过工作进度要紧 你可以没完没了的死磕一个东西 去挖知识 去深入探究 但是你不能用没完没了的工作态度去处理一个项目 而滞留在每个点上,时间是宝贵的,不能随便浪费.

于是我在项目里是这样做的 用一下media query 由于只是定一下高度 所以我将媒体查询放在了引入的css文件里 没有用在引入样式文件时媒体查询的方式

由于它是通用定制多个视图的 所以将这部分放在了模板页里去引入的一个外部css文件里

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

}
    /*页面高度定制*/
/*for iphone4 it ratio is  320x480*/
@media all and (max- 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- 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- 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- 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- 385px) and (min- 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端模拟设备取到的参数为准