精华内容
下载资源
问答
  • 移动端适配方案

    2020-07-19 22:35:37
    移动端适配(一)移动端适配方案(二)响应式设计相关的几个概念(三)获取窗口大小的api(四)横屏适配问题(五)移动端调试 (一)移动端适配方案 1、缩放 动态设置标签 (function adapt(){ const cueWidth = ...

    (一)移动端适配方案

    1、缩放

    动态设置标签

    (function adapt(){
    	const cueWidth = window.screen.width;
    	const targetWidth = 750;
    	const scale = curWidth / targetWidth;
    	const meta = document.createElement('meta');
    	meta.name = 'viewport';
    	meta.content = `initial-scale=${scale},minimum-scale=${scale}.maximum-scale=${scale}`;
    	document.head.appendChild(meta);
    })()
    

    2、flexible rem布局方案
    通过计算不同的手机尺寸设置根节点的font-size,

    (function flexible (window, document) {
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
    
      // adjust body font size
      function setBodyFontSize () {
        if (document.body) {
          document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))
    
    

    rem 是相对于html节点的font-size来计算的,代码中将HTML的font-size设置为布局视口的 1/10 docEl.clientWidth / 10

    3、vh、vw方案

    vw(Viewport's width):1vw等于视觉视口的1%
    vh(Viewport's height) :1vh 为视觉视口高度的1%
    vmin : vw 和 vh 中的较小值
    vmax : 选取 vw 和 vh 中的较大值
    PostCSS的 postcss-px-to-viewport 插件帮我们完成px到vw的转换。写代码时,我们只需要根据UI给的设计图写px单位即可。
    缺陷:px转换成vw不一定能完全整除,因此有一定的像素差。
    比如当容器使用vw,margin采用px时,很容易造成整体宽度超过100vw,从而影响布局效果。当然也是可以避免的,例如使用padding代替margin,结合calc()函数使用等等

    (二)响应式设计相关的几个概念

    在开发过程中,会遇到很多概念,比如:像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等,这些概念对应的意义分别是什么呢?

    1、像素(Pixe)
    像素即一个个的小方块,具有特定的位置和颜色。一个显示屏的成像原理是通过一系列的小点排列成的一个矩形,每一个小点叫做一个物理像素。而屏幕分辨率就是指一个屏幕具体由多少个像素点组成的。
    每英寸像素取值(Pixel per inch, PPI)的意思就是每一英寸内的物理像素数量,屏幕的PPI越高,则说明同一大小的屏幕上能显示的物理像素越多,能给图像提供更多的细节,拟真度就越高。
    常说的图片分辨率即指图片内含有的物理像素数。
    DPI表示每英寸包含的点数,DPI常用于描述打印机的点数,打印机的DPI越高,打印的图像越精细。

    2、独立设备像素

    随着科技的发展,手机的分辨率逐渐提升,因此我们需要用同一单位告诉不同分辨率的手机,在界面上个显示元素的大小是多少,即设备独立像素即DIP或DP,
    设备像素比(DPR)即物理像素与设备独立像素的比值。可以使用window.devicePixelRatio来获取dpr,CSS中可以使用@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }区分dpr。

    开发过程中,我们使用的px作为长度单位,px指css像素,在页面未缩放,一个CSS像素等于一个物理像素,当用户对浏览器缩放后,css像素会被缩放,此时页面的缩放系数 = CSS像素 / 设备独立像素

    3、视口
    视口(viewport)代表当前可见的计算机图形区域,在CSS里定义的是元素的包含块。视口包含有三种:布局视口,视觉视口和理想视口。

    布局视口(layout viewport):当以百分比计算一个元素的大小时,计算值基于这个元素的包含块计算来的,当元素为顶级元素时,基于布局视口计算的。所以布局视口是网页布局的基准窗口,在pc上,布局视口等于当前浏览器的窗口大小,在移动端,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,但是非常小,用户可以手动对网页进行放大。使用document.documentElement.clientWidth / clientHeight来获取布局视口大小。
    在这里插入图片描述

    视觉视口(visual viewport):用户看到的真实区域。当用户对浏览器进行缩放时,不会改变布局视口的大小,所以页面布局是不变的,但是缩放会改变视觉视口的大小。通过调用window.innerWidth / innerHeight来获取视觉视口大小。

    理想视口(ideal viewport):网站页面在移动端展示的理想大小页面的缩放系数 = 理想视口宽度 / 视觉视口宽度

    4、viewport
    可以设置元素的viewport,来设置视口,缩放等。viewport的设置:

    value 描述
    width 以pixels(像素)为单位, 定义布局视口的宽度。
    height 以pixels(像素)为单位, 定义布局视口的高度。
    initial-scale 定义页面初始缩放比率。。
    minimum-scale 定义缩放的最小值;必须小于或等于maximum-scale的值。
    maximum-scale 定义缩放的最大值;必须大于或等于minimum-scale的值。
    user-scalable 如果设置为 no,用户将不能放大或缩小网页。默认值为 yes。

    (三)获取窗口大小的api

    • 获取浏览器视口高度(包括垂直滚动条):window.innerHeight;
    • 获取浏览器窗口外部的高度:window.outerHeight;
      窗口可视区域宽度:document.documentElement.clientWidth ||document.body.clientWidth;
    • 窗口可视区域高度:
      document.documentElement.clientHeight ||document.body.clientHeight;
    • 窗口可视区域宽度+边线和滚动条: document.body.offsetWidth ;
    • 窗口可视区域高度+边线和滚动条: document.body.offsetHeight ;
    • 实际内容的宽度: document.body.scrollWidth;
    • 实际内容的高度: document.body.scrollHeight;
    • 滚动条下拉被卷起来的距离:
      document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop;
    • 滚动条侧拉被卷起来的距离:
      document.body.scrollLeft || document.documentElement.scrollLeft ;
    • 网页正文部分上:window.screenTop;
    • 网页正文部分左:window.screenLeft;
    • 元素的宽度:obj.offsetWidth;
    • 元素的高度:obj.offsetHeight;
    • 相对于父元素的上位移:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)
    • 相对于父元素的左位移:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)

    (四)横屏适配问题

    js检测横屏

    window.addEventListener("resize", ()=>{
        if (window.orientation === 180 || window.orientation === 0) { 
          // 竖屏  正常方向或屏幕旋转180度
        };
        if (window.orientation === 90 || window.orientation === -90 ){ 
           //横屏  屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        }  
    }); 
    

    window.orientation 屏幕旋转方向

    CSS检测横屏

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

    (五)移动端调试

    1、VConsole

    下载安装:npm install vconsole
    引入使用:

    const VConsole = require('vconsole');
    new VConsole();
    

    2、spy-debugger

    控制台安装 npx spy-debugger -p 8888
    手机和pc保持在同一网络下,手动设置代理,ip设置为pc的ip地址,端口为spy-debugger启动的端口,
    使用手机访问要访问的页面
    抓包页面

    在这里插入图片描述

    展开全文
  • 移动端适配方案.doc

    2020-03-13 21:33:05
    移动端适配方案.doc

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,927
精华内容 770
关键字:

移动端适配方案