前端学习笔记—移动端web开发

木溪bo

发布于 2024-03-23 07:48:52

1560

发布于 2024-03-23 07:48:52

文章被收录于专栏：木溪知识加油站

一、移动端视口

视口(viewport)：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。我们要最终使用的是理想视口。
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的 PC 端页面在手机上显示的问题。
iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
现在市场常见的移动端web页面通常有两种，单独制作移动端页面和响应式页面两种方案。主流还是PC和移动端各自单独制作一套页面。

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

二、响应式布局ui，非主流，一般按公司需要开发

响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦，需要花很大精力去调兼容性问题

设置根布局的font-Size ，优点是可以根据设计稿尺寸宽度合理设置DESIGN_WIDTH进行比较完美的适配

; (function (doc, win) {
    if (doc==null||!doc.addEventListener) {
        return;
    }
    // 适配rem的js代码函数，适用于移动web开发界面比例适配
    var supportsOrientationChange = "onorientationchange" in win ? "orientationchange" : "resize";
    var timeoutId;
    function setRem() {
        //设备宽度限制常量，用于适配最大宽度
        const MAX_CLIENT_WIDTH = 750;

        //设计稿的宽度为375px，不同设计稿修改这个值
        const DESIGN_WIDTH = 375;

        //也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，
        //我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。
        const UI_REM = 100;

        //获取并调整设备宽度
        var clWidth = doc.documentElement.clientWidth;
        if (clWidth > MAX_CLIENT_WIDTH) {
            doc.documentElement.style.fontSize = "100px";
        } else {
            clWidth = clWidth >= MAX_CLIENT_WIDTH ? MAX_CLIENT_WIDTH : clWidth;

            console.log("clientWidth=" + clWidth);

            //最后设置html的 font-size= 移动设备 / 设计稿宽度 * 100  = 100px，那么 1rem = 100px
            const fontPX = (clWidth / DESIGN_WIDTH) * UI_REM;
            doc.documentElement.style.fontSize = fontPX + "px";
        }
    }
    console.log("初始化设置rem，" + supportsOrientationChange);
    setRem();//设置rem

    //supportsOrientationChange 变量用于判断浏览器是否支持 orientationchange 事件，如果支持，
    //则使用该事件进行窗口大小的监听，否则使用 resize 事件
    win.addEventListener(supportsOrientationChange, function () {
        try {
            console.log("监听到变化");
            // 防抖延迟时间，节流函数，防止页面频繁刷新
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                setRem();
            }, 300)
        } catch (error) {
            console.log(error)
        }
    }, false)
}(document, window))

淘宝无限适配flexible.js源码设置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))