使用了movable-area 和 movable-view 进行缩放，在iOS上面缩放影响到了整个页面，不在缩放区域内的内容也能缩放。在Android上正常。

分类：uni-app

uniapp

视频.zip

2024-03-13 17:28 负责人:无分享

4 个回复

BeardYound

录制个视频，代码贴出来

a***@yic8.cn (作者)

<view class="boxSty" :style="{overflow: 'scroll', height: height,paddingBottom:'10px'}">

<movable-area v-if="detailInfo.bid" style="width: 100%;">

<movable-view :direction="directionVal" scale scale-min="0.5" :out-of-bounds="false"

scale-value="scaleValue" :scale-max="2" @change="onChange" @scale="onScale"
style="width: 200vw;height: max-content;padding:0 30px 0 20px;box-sizing: border-box;">

<view id="content" v-html="detailInfo.bid.originContent" ref="content"></view>

</movable-view>

</movable-area>

</view>

2024-03-13 17:38

a***@yic8.cn (作者)

视频

视频.zip

BeardYound

尝试一下这样
，从视频上看不出有什么问题，安卓的视频也提供一下

<movable-area v-if="detailInfo.bid" scale-area  
            style="pointer-events: none;width: 100vw;height: calc(100vh - constant(safe-area-inset-bottom));height: calc(100vh - env(safe-area-inset-bottom));">  
            <movable-view direction="all" scale scale-min="0.5" :out-of-bounds="false" :scale-value="scaleValue"  
                :scale-max="2" @change="onChange" @scale="onScale"  
                style="pointer-events: auto;position: relative;width: 100%;height:100%">  
                <view id="content" v-html="detailInfo.bid.originContent" ref="content"></view>  
            </movable-view>  
        </movable-area>

a***@yic8.cn (作者)

我更新zip增加了Android视频，您看下

2024-03-13 18:13
a***@yic8.cn (作者)

我测试了一下，问题在于盒子的高度是动态获取的，高度写为固定了就没问题了

2024-03-13 18:25
BeardYound

回复 a***@yic8.cn: 是根据哪个功能获取的，尝试获取完成在渲染movable-area呢

2024-03-13 18:30
a***@yic8.cn (作者)

回复 BeardYound:问题解决了，就是动态高度的问题，谢谢您的帮助

2024-03-13 18:33

BeardYound

其实只是公告内容才使用了movable-area，但是在ios却整个页面都进行缩放了，先确保下ios是否自带缩放，先把movable-area隐藏看看
，如果没有就审查元素看看，是否是样式污染了

要回复问题请先登录或注册

使用了movable-area 和 movable-view 进行缩放，在iOS上面缩放影响到了整个页面，不在缩放区域内的内容也能缩放。在Android上正常。

与内容相关的链接

4 个回复

公告

相关问题