html页面自适应问题总结包含JS判断设备类型

iconyy
649 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

最近公司给了一份任务，要求写一份页面，自适应设备类型，分中英文文档，以及H5和pc端。提了一些要求，趁晚上有时间总结一下写页面遇到的几个问题。

html实现响应式

响应式或者自适应的是页面适应我们不同屏幕尺寸的手机，电脑等设备。

头部加上代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,
user-scalable=no">

这一步的目的是告诉浏览器当前viewport的宽度等于设备的宽度，user-scable=no或者0是不允许用户手动缩放，这个我理解主要是用手机浏览网页的时候，如果出现缩放的情况，会很影响体验感，因为手指会一直滑动屏幕。

宽度使用相对宽度

不要使用固定宽度，高度可以固定。宽度如果固定的话，不同设备显示宽是不一样的，如果固定宽度，必然不可能适应所有设备。
可以使用相对宽度，我一般使用百分比，相对于父级盒子的宽度。

字体单位不使用px

可以使用相对单位 rem 或者 em ，rem相对html根元素， em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

选择性加载css样式

不在head中写css样式,而是使用外部引入css样式。这样做的好处就是可以根据设备类型的不同来引入不同的css样式，包括pc端的页边距和移动端肯定是不同的，还有行距字体大小等，都可以通过外部使用css样式解决。至于检测设备类型，这就要交给js。

JS检测设备类型

主要有以下几种方式：

. 通过设备信息直接判断

    function filesMobile(){
        // 市面上的主流使用环境
        return /Andriod|iphone|ipad|webOs|Windows Phone|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

这里我们主要会使用到 navigator 对象，它是 JavaScript中的一个独对象，用于提供当前用户所使用的浏览器，操作系统等信息。相关信息数据会以 navigator对象属性的形式展现出来，目前市面上的所有主流浏览器都支持该对象的使用。而在 navigator对象中存在一个 userAgent属性，它会返回用户的设备操作系统，以及使用浏览器的信息。比较特殊的是，在APP应用不支持navigator对象的使用，所以我们可以通过判断是否存在 navigator对象来确定是不是APP使用环境。

通过浏览器宽度确定(比较简单粗暴)

    if(window.screen.availWidth < 768){ 
        console.log("当前环境为移动端");
    }else {
        console.log("当前环境为PC端");
    }

这里主要是使用了window.screen.availWidth，可以返回屏幕的可用宽度，根据宽度适配设备。下面给出一些设备宽度（通过浏览器控制台得到）：

    iphone SE: 375×667
    iphone xr: 414×896
    iphone12 pro:390×844
    samsung galaxy s8+ :360*740
    ipad air :820×1180
    ipad mini:768×1024
    ipad pro:1024×1366

这些就是一些常见的宽度，更多的可以去控制台中看，可以看到一般手机宽度都是比较小，iPad mini宽度是768，因此默认小于768的就是移动端。

判断IOS或者Andriod

    let userMessage = navigator.userAgent;
    let isAndroid = userMessage.indexOf('Andriod') > -1 || userMessage.indexOf('Adr') > -1;
    // 当前为Andriod环境
    let isIOS = !!userMessage.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)); // 当前为IOS环境

区分Andriod，iphone，ipad

    let userMessage = navigator.userAgent.toLowerCase();
    if(/android|adr/gi.test(userMessage)){
        // 当前为Andriod环境
    }else if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(userMessage)){
        // 当前为iphone环境
    }else if(/iPad/gi.test(userMessage)){
       // 当前为iPad环境 
    }

引入不同link样式

  <link rel="stylesheet" href="./css/pc_cn.css" title="a">        //head中引入
  
    <script>
        if (window.screen.availWidth < 768) {
          //移动端
          var links = document.getElementsByTagName('link')
          links[0].href = './css/h5_cn.css'        //判断条件后切换移动端样式
          console.log(1);
        } else {
          //PC端
        console.log(2);
        }
    </script>

总结

总结一下：上面这些就是自适应页面制作思路以及js检测设备类型的方法总结，可以根据自己的需求来操作。

这篇字数有点多了，下一篇再介绍，关于产品对页面的需求，以及我的解决方法。。。

avatar
文章
阅读
粉丝