关于JS开发框架的缩放渲染逻辑

【任务描述】
当前的JS框架会强制页面根据designWidth和实际屏幕宽度的比例进行缩放，这似乎有几个问题：一是当容器的flex-direction为column且布局总高度超出屏幕高度时，页面可以上下滑动，但将属性值改为row后，当总宽度超出屏幕宽度时却不能左右滑动而是缩放（缩放后高度仍超出时会被压缩也不能上下滑动）；二，横向和纵向的像素都会被缩放以保持宽高比，这让我不知道怎么实现宽高都自适应满屏幕且所有项目自身的宽高比不变（这条有点问题当我没说……）。
【解决方案】
也许可以把逻辑宽度designWidth改为逻辑尺寸designSize(或者designLength?)，并且增加缩放基准方向designDirection；或者不改designWidth，增加逻辑高度designHeight?
【任务来源】
不知道是故意这么设计的还是设计缺陷？不管怎么说我觉得上述改动应该至少能使设计更加灵活和自由（也许能让横屏应用的缩放程度更少一点？毕竟屏幕的长边分辨率变化太大了）。我不是程序员也没学过JS，如果认识不到位还请理解下。

又看了一遍API文档，发现第二点还是很好解决的，比如设置position为absolute，果然还是认识不够啊。。

Hi开发者，
感谢您的反馈，请问您的问题是否已经解决？还需要OpenHarmony开发者给与帮助吗？
感谢支持，欢迎持续关注~

没有，我需要让横屏时页面的缩放基准为高度而不是宽度，不知怎么可以实现？现在的designWidth似乎会跟随屏幕方向的设置情况而改变所指代的屏幕边。

开发者，你好，

第一个问题：
现在框架的逻辑是这个样子的：div在竖直方向布局时，高度会随内容进行扩展，超出区域可进行滚动。而水平方向布局的最大宽度为屏幕宽度，内容超出最大宽度，会使用flex的方式对内容进行压缩。如果期望横向超出可滚动，在API version 6+后可使用overflow样式进行控制

第二个问题：
关于designWidth的定义如下：
页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。
综上，使用designWidth后，会按照屏幕的宽度，按比例进行缩放，所以，在横屏下会缩放比例会明显变大。如果期望在横屏下做较好的自适应，建议配置为autoDesignWidth，并结合flex或相对布局的能力进行界面适配。
autoDesignWidth的定义如下：
页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。
详见：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/js%E6%A0%87%E7%AD%BE%E9%85%8D%E7%BD%AE.md

你好，上述问题咨询已关闭，若还有具体使用上的疑问可私信交流~

OpenHarmony / docs

内容风险标识

评论 (5)

OpenHarmony / docs .gitee-modal { width: 500px !important; }

内容风险标识