首页 > 其他分享 >关于把竖向单个布局在鸿蒙等折叠手机屏中显示成双向布局

关于把竖向单个布局在鸿蒙等折叠手机屏中显示成双向布局

时间:2024-11-07 16:35:09浏览次数:5  
标签:function 屏中 scale 折叠 布局 innerWidth 竖向 window var

简单描述下需求场景:

  本来开发的页面在大部分手机里,都是竖向下来展开的,但现在市场上折叠手机越来越多,那么当用户翻转折叠手机,宽度变长了,原本我们的开发页面就会被拉大,显得不好看,所以需要前端针对折叠屏进行兼容,在没打开的时候正常显示,翻转打开的时候就把页面上的div结合百分比和flex布局展开成两列。改善体验。

没做兼容之前的折叠屏效果如下:

 做了兼容后,同样的屏幕大小打开效果如下:

 

1. 首先更改全局rem的计算方式,按照vue和react项目,都是放在index.html的js中,项目进入加载逻辑。

以前正常手机都是1,但折叠屏情况下,要按0.5算,小一半屏幕

  function resize() {
      !function (e) {
        function t(a) {
          if (i[a])
            return i[a].exports;
          var n = i[a] = {
            exports: {},
            id: a,
            loaded: !1
          };
          return e[a].call(n.exports, n, n.exports, t),
            n.loaded = !0,
            n.exports
        }

        var i = {};
        return t.m = e,
          t.c = i,
          t.p = "",
          t(0)
      }([function (e, t) {
        "use strict";
        Object.defineProperty(t, "__esModule", {
          value: !0
        });
        var i = window;
        var benchmarkWidth = 750;
        t["default"] = i.flex = function (e, t) {
          var a = e || 100
            , n = t || 1
            , r = i.document
            , o = navigator.userAgent
            , d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i)
            , l = o.match(/U3\/((\d+|\.){5,})/i)
            , c = l && parseInt(l[1].split(".").join(""), 10) >= 80
            , p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi)
            , s = i.devicePixelRatio || 1;
          p || d && d[1] > 534 || c || (s = 1);
          var u = 1 / s
            , m = r.querySelector('meta[name="viewport"]');
          m || (m = r.createElement("meta"),
            m.setAttribute("name", "viewport"),
            r.head.appendChild(m));
          m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u);
          var offsetWidth = i.document.documentElement.offsetWidth;
          let percentage = 1
          // 宽屏、折叠屏缩小页面比例
          try {
            const scale = window.innerWidth / window.innerHeight
            if (scale >= 0.9) {
              percentage = 0.5
            }
          } catch { }
          r.documentElement.style.fontSize = offsetWidth / benchmarkWidth * e * percentage + "px";
          window.screenfontSize = offsetWidth / benchmarkWidth * e * percentage
        }
          ,
          e.exports = t["default"]
      }
      ]);
      flex(100, 1);
    }

  同时要在页面中做监听

   resize()
    var pageWidth = window.innerWidth
    var t = null
    var fn = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener(fn, function () {
      clearTimeout(t)
      t = setTimeout(function () {
        var newPageWidth = window.innerWidth
        if (pageWidth !== newPageWidth) {
          pageWidth = newPageWidth
          resize()
        }
      }, 300)
    }, false);

 2. 在对应要做兼容的页面中,进入页面同样执行 window.innerWidth / window.innerHeight 算出当前屏幕对应比例值,这里以react为例子,vue转换下写法一样的

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [hmScale, setHmScale] = useState(window.innerWidth / window.innerHeight); // 比例值

    // 兼容折叠屏等系列获取scale
  const getWidthScreen = () => {
    // 监听开始初始化最新值
    setHmScale(window.innerWidth / window.innerHeight)
    // 二次预防措施
    let t = null
    let pageWidth = window.innerWidth
    clearTimeout(t)
    t = setTimeout(function () {
      let newPageWidth = window.innerWidth
      if (pageWidth !== newPageWidth) {
        pageWidth = newPageWidth
        setHmScale(window.innerWidth / window.innerHeight)
      }
    }, 300)
  }

  useEffect(() => {
    window.addEventListener('resize', getWidthScreen)
    return () => { // 卸载时移除监听
      window.removeEventListener('resize', getWidthScreen)
    }
  }, [])

  return (
    <div>
         <div className={`detail-page ${hmScale >= 0.9 ? 'width-screen' : ''}`}>
             <div>1 </div>
             <div>2 </div>
        </div>
    </div>
  );
}

export default MyComponent;

 3. 得出scale后更改原本布局下的div样式,用百分比计算减去对应外边距的rem,再用flx布局就可以完成响应式折叠屏兼容。css参考如下:

.detail-page {
  &.width-screen {
    display: flex;
    flex-wrap: wrap;
    & > div {
      width: calc((100% - .2rem) / 2);

      &:nth-child(even) {
        margin-left: .2rem;
      }
    }
  }
}

  以上则就是兼容折叠屏的基本方法,如果是三屏,理论上就除以3,实际真机没测试过。

 

标签:function,屏中,scale,折叠,布局,innerWidth,竖向,window,var
From: https://www.cnblogs.com/xiaozhu007/p/18525559

相关文章

  • flex 设置弹性盒子布局(使子元素动态的占据20%,30%,50%)
    默认情况下,flex值为1,也就是占用弹性容器剩余位置的1份使用flex修改弹性伸缩比的示例:<body><divclass="box"><divclass="itemitem1">1</div><divclass="itemitem2">2</div><divclass="i......
  • [vant] 最新版使用vw布局+vant组件库兼容方案
    1.安装vw插件npmipostcss-px-to-viewport-8-plugin--save-dev2.配置vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite';importComponen......
  • CSS弹性布局:灵活布局的终极指南
    在网页设计中,CSS弹性布局(Flexbox)是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素,尤其是在响应式设计中表现出色。今天,我们就来深入探讨一下Flexbox的各个属性,让你彻底掌握这个强大的布局工具。一、什么是Flexbox?CSS弹性布局(Flexbox)是一个强大的布局模型,旨在......
  • KbdHebL3.dll文件丢失危机?解决KbdHebL3.dll缺失问题:希伯来语键盘布局组件恢复全攻略
    在使用计算机时,有时可能会遇到KbdHebL3.dll文件丢失的问题。KbdHebL3.dll是一个与希伯来语键盘布局相关的动态链接库(DLL)文件,它负责处理希伯来语键盘布局和输入法转换的代码。一旦该文件丢失,将会导致希伯来语键盘布局无法正常使用。以下是一份详细的恢复全攻略,帮助用户解决KbdHe......
  • 腿夹腿,带你用react撸后台,系列三(布局和鉴权篇)
    Github地址|文档|在线预览|主题版在线预览react-antd-console是一个后台管理系统的前端解决方案,封装了后台管理系统必要功能(如登录、鉴权、菜单、面包屑、标签页等),帮助开发人员专注于业务快速开发。项目基于React18、Antdesign5、Vite和TypeScript等新......
  • 学习笔记(二十五):ArkUi-栅格布局 (GridRow/GridCol)
    概述:栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。统一的定位标注:栅格......
  • c# WPF 布局控件、样式、触发器
    一.布局控件1.网格布局(Grid、UniformGrid)Grid布局控件:<!--Grid布局控件:网格布局--><Grid><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></Row......
  • CSS网页布局综合练习(涵盖大多CSS知识点)
    题目:将上面的转化为下面的基本骨架<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......
  • 09-鸿蒙开发中的界面开发:布局思路入门
     大家好,欢迎来到鸿蒙开发系列教程!今天,我们将深入探讨界面开发中的布局思路。布局是用户界面设计的核心,合理的布局不仅可以提升用户体验,还能使代码更加整洁和易于维护。无论你是初学者还是有一定经验的开发者,理解布局的思路都是非常有帮助的。让我们开始吧!1.什么是界面布局?......
  • 用 Vue 和 CSS 快速实现电商风格的底部信息区域 从零开始:Vue 实现响应式电商底部布局
    效果图博客标题推荐用Vue和CSS快速实现电商风格的底部信息区域从零开始:Vue实现响应式电商底部布局新手必学!使用Vue构建精美电商底部导航Vue项目实战:构建电商风格的底部信息区域简单易懂!用Vue实现电商网站底部信息模块博客正文目录引言步骤一:创建基本HTML......