兼容性问题

  • 列表滚动定位的Element.scrollIntoView()方法，为了滚动的平滑以及设置定位元素的位置，需要设置scrollIntoViewOptions，在开发时Chrome中测试一切正常，但是移动端测试发现在IOS中不支持。
  • 在比较旧的设备中，flex布局下的子元素中，不可以设置position: absolute;否则会使flex中设置的居中这类布局效果失效。
    • 解决方案为：不同时使用两种布局，或在absolute中也增加居中定位。

  • 在部分华为设备中，video标签，仅在点击播放视频的第一次缓冲时（暂停以及后续网速问题导致缓冲时不出现）会出现一个很大的三角形播放按钮，而video标签中并没有设置control属性，设置查询到的一些CSS伪类display:none;并没有生效。

    • 解决方案为：默认情况下隐藏video，并监听OnCanPlay方法，在可以开始播放的时候设置该video的display:block;

      某些需求解决方案

  • 该移动端项目左上角会有一个返回按钮，点击该按钮会按照逻辑返回到上一个页面，但是某些手机支持在屏幕上从左向右滑动返回（与点击浏览器到后退按钮相同），之前的跳转逻辑是在每次跳转时都调用history.push()，这样会造成两种返回方式返回的页面不同，为了支持该需求，将部分跳转改为了history.replace()，具体跳转如下图：事件流.jpg

    某些简单优化记录

  • 测试时发现在iPad设备中，overflow的滚动会有些卡。

    • 经过查询，在需要滚动的div中增加css属性：-webkit-overflow-scrolling: touch;可以解决卡顿问题

  • 该项目的使用rem，根据设备自动调整font-size来做到自适应，之前项目中自适应font-size的方法觉得写的蛮好，因此记录下来：

    1. export function initFontSize() {
    2. let base = 375; // UI稿宽度
    3. const { documentElement } = document;
    4. const mediaQuery = window.matchMedia('(orientation: portrait)'); // 检测是否为竖屏
    5. let timer;
    6. let standardRatio = 667 / 375; // 设计稿宽高比
    7. if (isPad()) {
    8.   standardRatio = 1024 / 768; // iPad设计稿宽高比
    9.   base = 768;
    10. }
    11. function setFontSize() {
    12.   const isLandscape = !mediaQuery.matches;
    13.   let screenWidth = window.screen.width;
    14.   let screenHeight = window.screen.height;
    16.   if (screenWidth < screenHeight) {
    17.     [ screenWidth, screenHeight ] = [ screenHeight, screenWidth ];
    18.   }
    20.   let width = documentElement.clientWidth;
    21.   let height = screenHeight;
    23.   const realRatio = width / height;
    25.   // 根据相对设计稿更小的宽或者高来计算fontSize
    26.   if (realRatio >= standardRatio) {
    27.     width = height * standardRatio;
    28.     documentElement.classList.remove('adjustHeight');
    29.     documentElement.classList.add('adjustWidth');
    30.   } else {
    31.     height = width / standardRatio;
    32.     documentElement.classList.remove('adjustWidth');
    33.     documentElement.classList.add('adjustHeight');
    34.   }
    36.   window.adjustWidth = width;
    37.   window.adjustHeight = height;
    38.   // fontSize = 自适应宽与原来宽度比 * 初始fontSize
    39.   let target = width / base * 16;
    40.   if (isLandscape) {
    41.     target /= standardRatio;
    42.   }
    43.   documentElement.style.fontSize = `${target}px`;
    44.   const currentSize = window.getComputedStyle(documentElement).fontSize.replace('px', '');
    45.   if (target !== currentSize) {
    46.     documentElement.style.fontSize = `${target / currentSize * target}px`;
    47.   }
    48. }
    49. window.addEventListener('resize', function() {
    50.   clearTimeout(timer);
    51.   timer = setTimeout(setFontSize, 300);
    52. }, !1);
    53. window.addEventListener('pageshow', function(e) {
    54.   e.persisted && (clearTimeout(timer), timer = setTimeout(setFontSize, 300));
    55. }, !1);
    57. window.addEventListener('orientationchange', function() {
    58.   console.log('改变了手机方向');
    59.   setFontSize();
    60. }, false);
    61. setFontSize();
    62. }