web移动端全屏滚动页面的适配问题

最新推荐文章于 2024-11-13 17:24:18 发布

weixin_30535913

最新推荐文章于 2024-11-13 17:24:18 发布

阅读量301

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/shenmissing/p/9871142.html

版权

1.问题说明
近日接到页面全屏滚动的需求，内容为：一张图片，一段文字以及固定在屏幕下方的按钮，如图所示：此处输入图片的描述
根据设计稿尺寸写好页面布局，在大多数手机尺寸中都是适配的，个别手机及ipad会出现问题，以下特例说明：
<1> iphone X（375812）中，fixed定位的按钮即红色区域会与上方内容之间存在一段较长的空白，影响美观。
<2> ipad(7681024 / 1024*1366)中，红色按钮区域会覆盖上方的部分内容，需做调整。
注：以上尺寸只是个别不代表全部，适配的思想是一样的。

2.思路解析
使用css3的媒体查询，单纯的根据设备宽或高来写适配的话，试了试并不合适做此工作，比较复杂，无法将设备分类。后来想到使用js计算设备的宽高比，以此来分类。然后在搜索宽高比的时候，不经意间看到css3的媒体查询就有宽高比: 两值必须为正整数

@media screen and (max-aspect-ratio: 3/4){
    //....
}
@media screen and (min-aspect-ratio: 9/16){
    //....
}

3.解决问题
找到ios&Android大部分机型尺寸，如下表(来自网络，仅供参考。更多请转 https://www.cnblogs.com/sunshq/p/5695102.html )：
| 机型 | 尺寸 | 点(Point) | 宽高比（去尾）
| ------ | ------ | ------ |
| iPhone4s | 3.5英寸 | 320 * 480 | 0.66
| iPhoneSE | 4.0英寸 | 320 * 568 | 0.56
| iPhone6 | 4.7英寸 | 375 * 667 | 0.56
| iPhone6s | 4.7英寸 | 375 * 667 | 0.56
| iPhone7 | 4.7英寸 | 375 * 667 | 0.56
| iPhone6P | 5.5英寸 | 414 * 736 | 0.56
| iPhone6sP | 5.5英寸 | 414 * 736 | 0.56
| iPhone7P | 5.5英寸 | 414 * 736 | 0.56
| iPhone X | 5.8英寸 | 375 * 812 | 0.46
| iPadPro | 9.7英寸 | 768 * 1024 | 0.75
| iPadPro | 12.9英寸 | 1024 * 1366 | 0.75
| | |
| 三星Note5 | 5.7英寸 | 480 * 854 | 0.56
| Nexus 5 | 4.95英寸 | 360 * 640 | 0.56
| 华为MT1-U06 | 6.1英寸 | 480 * 720 | 0.66
| LG G3 | 5.5英寸 |720 * 1080| 0.66
| 三星galaxy s4 | 5英寸 | 540 * 960 | 0.56

切换尺寸查看页面情况，发现需要修改的地方写在对应的媒体查询里，以此达到预期效果。

@media screen and (max-aspect-ratio: 56/100){
    //....
}
@media screen and (min-aspect-ratio: 7/10){
    //....
}

转载于:https://www.cnblogs.com/shenmissing/p/9871142.html