移动端适配

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

一、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游戏开发：横屏适配