移动端适配

最近项目中需要对移动端进行横竖屏适配,通过搜集资料,结合实际项目,总结如下:

一、rem适配

1、手机竖屏时,通过屏幕的宽度来计算html的字体大小 (设计稿的规格 750 * 1334)
2、手机横屏时,通过屏幕的高度来计算html的字体大小

;(function (win, doc) {

     if (!win.addEventListener) return;

     function setFont() {

         const html = document.documentElement;

         const clientHeight = html.clientHeight;

         const clientWidth = html.clientWidth;


         if (clientWidth < clientHeight) { // 竖屏

            html.style.fontSize = clientWidth / 750 \* 100 + "px";

         } else { // 横屏

            html.style.fontSize = clientHeight / 750 \* 100 + "px";

         }

     }

     setFont();

     window.addEventListener("resize", function () {

        setFont();

     });

     window.addEventListener('pageshow', function (e) {

         if (e.persisted) {

            setFont();

         }

     });

})(window, document);

二、vw和vh适配

在支持vw和vh的设备上可参考如下 SCSS 代码进行适配:

$vw_base: 375;

$vw_fontsize: 20;

html {

     font-size: 20px; // 不支持vw单位时,回退到px单位

     font-size: ($vw_fontsize / $vw_base) * 100vw;

}

@media screen and (orientation: landscape) {

     html {

         font-size: 20px;

         font-size: ($vw_fontsize / $vw_base) * 100vh;

     }

}

三、媒体查询

通过媒体查询实现横竖屏样式适配:

@media screen and (orientation: portrait) {
    /* 竖屏 */
}
@media screen and (orientation: landscape) {
    /*横屏 css*/
}

在 Android 部分机型中,若页面中存在 input/textarea等输入框时,输入框获取焦点,键盘弹起时,会导致页面回缩,即页面的宽度(竖屏时)或者高度(横屏时)被改变。此时,需设置最小宽度,示例如下:

@media screen and (orientation: landscape) and (min-width: 560px) {
    // 横屏
}

附:设备尺寸查询地址
参考文章:
H5开发:横屏适配
H5游戏开发:横屏适配

你可能感兴趣的