移动端手机网页适配iPad与折叠屏设备

news2024/10/7 10:18:54

采用的网页适配方案：移动端页面px布局适配方案（viewport）

产生此问题的原因

由于手机与平板等设备宽高比差异导致页面展示不全或者功能按钮展示在视口之外点击不到。
简单来说就是我们的页面都是瘦长(即高大于宽)的，而折叠屏等设展开后是矮胖的(即宽大于高)，二者完全相反页面放进来当然展示不全了。

解决思路

既然是iPad与折叠屏的宽高比跟手机差异过大导致的，那么在iPad与折叠屏上采用差异化的适配方案即可；

当前我们所采用的移动端适配方案是直接用将视口的宽度设置为固定的设计稿宽度，在同样的宽度下iPad与折叠屏的高度要比手机小很多，所容纳的内容也少，导致某些区域被挤出了视口之外，

所以我们可以通用检测宽高比，在iPad与折叠屏这种设备下不设置视口的宽度而是将页面设置为固定的值即可。

注：这个宽高比是在chrome的移动设备模拟器用下面的代码得到最小页面展示宽高比，css的媒体查询也设置为这个值就行例如 0.6 就写成 3 / 5

var phoneWidth = parseInt(window.screen.width);
var phoneHeight = parseInt(window.screen.height);
phoneWidth / phoneHeight

代码

<script>
            //移动端版本兼容
            var phoneWidth = parseInt(window.screen.width);
            var phoneHeight = parseInt(window.screen.height);
            var phoneScale = phoneWidth / 750;
            var ua = navigator.userAgent;
 
            if(phoneWidth / phoneHeight >= 0.6) {
                document.write('<meta name="viewport" content="width=deviceWidth, user-scalable=no, target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
            }
</script>
 
<style>
        @media screen and (min-aspect-ratio: 3/5) {
            body,
            html {
                width: 750px;
                margin: 0 auto;
            }
        }
</style>