移动端开发，硬件设备检测的前端方法

发表于：2022-02-22 17:06:30浏览：1324次TAG： #移动端 #硬件设备检测

JavaScript检测横竖屏

// window.orientation：获取屏幕旋转方向
window.addEventListener('resize', () =&amp;gt; {
    // 正常方向或屏幕旋转180度
    if (window.orientation === 180 || window.orientation === 0) {
        console.log('竖屏')
    }

    // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    if (window.orientation === 90 || window.orientation === -90) {
        console.log('横屏')
    }
});

CSS检测横竖屏

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

    /* 竖屏 */
    #app {
        width: 100vw;
        height: 100vh;
        background: red;
    }
}

@media screen and (orientation:landscape) {

    /* 横屏 */
    #app {
        width: 50vw;
        height: 100vh;
        background: green;
    }
}

不同视口的获取方法

// 获取视觉视口大小（包括垂直滚动条）
let iw = window.innerWidth,
    ih = window.innerHeight;
console.log(iw, ih);

// 获取视觉视口大小（内容区域大小，包括侧边栏、窗口镶边和调整窗口大小的边框）
let ow = window.outerWidth,
    oh = window.outerHeight;
console.log(ow, oh);

// 获取屏幕理想视口大小，固定值（屏幕分辨率大小）
let sw = window.screen.width,
    sh = window.screen.height;
console.log(sw, sh);

// 获取浏览器可用窗口的大小（包括内边距、但不包括垂直滚动条、边框和外边距）
let aw = window.screen.availWidth,
    ah = window.screen.availHeight;
console.log(aw, ah);

// 包括内边距、滚动条、边框和外边距
let dow = document.documentElement.offsetWidth,
    doh = document.documentElement.offsetHeight;
console.log(dow, doh);

// 在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度和高度
let dsW = document.documentElement.scrollWidth,
    dsH = document.documentElement.scrollHeight;
console.log(dsW, dsH);

// 包含元素的内边距，但不包括边框、外边距或者垂直滚动条
let cw = document.documentElement.clientWidth,
    ch = document.documentElement.clientHeight;
console.log(cw, ch);

meta标签属性设置

&amp;lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&amp;gt;

meta标签属性设置设置刘海屏&底部小黑条

&amp;lt;meta name="viewport" content="viewport-fit=cover" /&amp;gt;

设置安全区域与边界的距离

/* 当使用底部固定导航栏时，我们要为他们设置 padding值： */
body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

h5-rem宽度自适应

//方法一
function add() {
    var html = document.documentElement;
    var hei = html.clientWidth;
    var fz = hei / 750 * 100 + "px";
    html.style.fontSize = fz;
};
add();
window.addEventListener("resize", add, false);

//方法二
function rem() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + "px";
}
rem();
window.addEventListener('resize', rem, false);

移动端rem&点击事件&返回事件

(function(w, t) {
    /* 移动端适配方案 */
    w.setFontSize = function() {
        let width = document.documentElement.clientWidth / 16,
            styleNode = document.createElement("style");
        styleNode.innerHTML = "html{font-size:" + width + "px!important}";
        document.head.appendChild(styleNode);
    }
    /* 返回 */
    w.goBack = function() {
        history.go(-1)
    }
    /* touchByM事件 */
    t.fn.touchByM = function(callback) {
        this.on('touchstart', function() {
            this.isMove = false;
        });
        this.on('touchmove', function() {
            if (!this.isMove) this.isMove = true;
        })
        this.on('touchend', function() {
            if (this.isMove) return;
            callback.call(this);
        })
    }
})(window, $);
setFontSize();

移动端，m-reset.css

*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section{margin:0;padding:0;border:0}
a{text-decoration:none}
button{user-select:none}
img{vertical-align:middle}
img:not([src]),img[src=""]{opacity:0}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
input,select,button,textarea{font-size:100%;font:inherit}
html,body{height:100%;overflow-x:hidden}

标签移动端适配

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
</head>

栏目分类全部>