微信小程序开发页面布局没问题，真机调试的时候页面布局就乱了

Question

<navigation-bar title="选择需要携带的东西" back="{{false}}" color="black" background="primary"></navigation-bar>

<view class="c2">
    <view>
        <text class="t1">现有全部物资重量:</text>
        <text class="t2">{{msg1}}kg</text>
    </view>
    <scroll-view class="c3" scroll-y="true">
        <button bind:tap="btntap1" data-info="{{8000}}">1</button>
        <button bind:tap="btntap1" data-info="{{124.5}}">2</button>
        <button bind:tap="btntap1" data-info="{{34}}">3</button>
        <button bind:tap="btntap1" data-info="{{50}}">4</button>
        <button bind:tap="btntap1" data-info="{{45}}">5</button>
        <button bind:tap="btntap1" data-info="{{12.5}}">6</button>
        <button bind:tap="btntap1" data-info="{{25}}">7</button>
        <button bind:tap="btntap1" data-info="{{625}}">8</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button bind:tap="btntap1" data-info="{{2}}">+2</button>
    </scroll-view>

    <view>
        <text class="t1">现在的大气温度：</text>
        <input type="text" bindblur="bdinput1" placeholder="20-35℃" class="i1"></input>
    </view>

    <view style="white-space:pre-wrap">
        <text class="t1">本    地    海    拔：</text>
        <text class="t3">2300m</text>
    </view>

    <view style="white-space:pre-wrap">
        <text>1111111
    MAX11111：</text>
        <text class="t3">{{arr[i]}}kg</text>
    </view>

    <view style="white-space:pre-wrap">
        <text>
剩余可载物资重量：</text>
        <text class="t3">{{arr[i]-msg1}}kg</text>
    </view>
</view>

这是wxml文件

.c1{
    height: 160rpx;
    width: 100%; 
}
.c1 view{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
} 

.c2 scroll-view {
    position: absolute;
    right: 0;
    margin-right: 35rpx

}

.t2 {
    overflow-y: auto;
    word-wrap: break-word;
    border: 1px solid red;
    width: 185rpx;
    height: 50rpx;
    text-align: center;
    color: green;
    position: fixed;
    right: 275rpx;
}

.c3{
    height: 500px;
    background-color: skyblue;
    width: 100px; 
    border: 1px solid royalblue;
    padding: 10rpx;
    margin: 50rpx;
}
.c3 button{
    height: 100rpx;
    width: 200rpx;
    text-align: center;
    font-size:80%;
    color: gold;
    border:1px solid blue;
    background-color: skyblue;
}

.btnview {
    width: 100%;
    padding: 20rpx 0;
    background-color: yellow;
    position: fixed;
    bottom: 0;
    left: 0;
}
.btnview button {
    width:90%;
}

.c2 view {
    height: 100rpx;
}

.i1 {
    border: 1px solid red;
    width: 185rpx;
    height: 50rpx;
    text-align: center;
    color: green;
    position: fixed;
    right: 275rpx;
}

.t1 {
    position: fixed;
}

.t3 {
    overflow-y: auto;
    word-wrap: break-word;
    border: 1px solid red;
    width: 185rpx;
    height: 50rpx;
    text-align: center;
    color: green;
    position: fixed;
    right: 275rpx;
}

这是wxss 文件

这是开发工具状态

这是真机调试状态

哪位bro能帮我解决一下啊，我操碎了心啊

更改过后，不显示scroll-view是这个样子：

显示的话是这样子：

代码更新如下：

<navigation-bar title="选择需要携带的东西" back="{{false}}" color="black" background="primary"></navigation-bar>

<view class="c2">
    <scroll-view class="c3" scroll-y="true">
        <button class="c1" bind:tap="btntap1" data-info="{{8000}}">1</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{124.5}}">2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{34}}">3</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{50}}">4</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{45}}">5</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{12.5}}">6</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{25}}">7</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{625}}">8</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
        <button class="c1"  bind:tap="btntap1" data-info="{{2}}">+2</button>
    </scroll-view>
</view>

<view class="c4">
    <view>
        <text>现有全部物资重量:</text>
        <text class="t3">{{msg1}}kg</text>
    </view>
    <view>
        <text>现在的大气温度：</text>
        <input type="text" bindblur="bdinput1" placeholder="20-35℃" class="i1"></input>
    </view>
    <view style="white-space:pre-wrap">
        <text>本 地 海 拔：</text>
        <text class="t3">2300m</text>
    </view>
    <view style="white-space:pre-wrap">
        <text>1111111MAX11111：</text>
        <text class="t3">{{arr[i]}}kg</text>
    </view>
    <view style="white-sp

Css样式如下：

.c2 {
    display: flex;
    flex-direction: row;
}

.c3 {
    height: 115vw;
    width: 50vw;
    position: absolute;
    background-color: skyblue;
    border: 1px solid royalblue;
}

.c1 {
    height: 15vw;
    width: 30vw;
    line-height: 10%;
    text-align: center;
    font-size: 80%;
    color: gold;
    border: 1px solid blue;
    background-color: skyblue;
}

.btnview {
    width: 100%;
    padding: 20rpx 0;
    background-color: yellow;
    position: fixed;
    bottom: 0;
    left: 0;
}

.btnview.button {
    width: 90%;
}

.c2.view {
    height: 100rpx;
}

.i1 {
    border: 1px solid red;
    width: 30vw;
    height: 5vh;
    text-align: center;
    color: green;
    display: flex;
    flex-direction: column;
}

.t3 {
    border: 1px solid red;
    width: 30vw;
    height: 5vh;
    text-align: center;
    color: green;
    display: flex;
    flex-direction: column;
}

怎样才能让scroll-view去右边又不影响左边，还能够正常显示完全

Answer 1

引自免费微信小程序：皆我百晓生

从你的描述和代码片段来看，页面在真机上出现问题很可能是由于固定定位(position: fixed)和尺寸单位(rpx)在不同设备上的适配问题导致的。下面是一些建议来优化你的布局，让其在不同设备上表现一致：

1. 调整固定定位元素

固定定位元素在不同分辨率和屏幕尺寸的设备上可能表现不一，尤其是当它们依赖于特定的像素值（如 right: 275rpx）时。考虑使用更灵活的布局方式，例如 Flexbox 或 Grid，来替代固定定位，或者至少减少固定定位元素的数量。

修改示例：

针对 .t2, .i1, .t1, 和 .t3 的样式，减少固定定位的使用，可以尝试改为相对定位或直接在布局中预留空间。

.t2, .i1, .t3 {
    /* 移除 position: fixed */
    border: 1px solid red;
    width: 185rpx;
    height: 50rpx;
    text-align: center;
    color: green;
    /* 示例：使用 margin 自动调整位置，具体值需根据实际情况调整 */
    margin: 10rpx auto;
}

2. 使用 Flexbox 布局

考虑使用 Flexbox 来重新组织你的页面结构，这将使内容在不同尺寸的屏幕上更加灵活地适应。

示例：

.c2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}
.c2 > view {
    flex: 1;
    display: flex;
    align-items: center;
    /* 根据需要调整 */
}

3. 尺寸单位调整

确保所有尺寸单位都使用 rpx，它是微信小程序为了适配不同设备屏幕而设计的单位，可以根据屏幕宽度自动缩放。但是，要注意过大或过小的 rpx 值在某些设备上可能会导致布局问题，适时调整为更合理的数值。

4. 检查滚动视图

确保 scroll-view 的高度设置合理，避免使用绝对单位（如 px），应改用 rpx，并考虑不同设备的屏幕高宽比。

修改示例：

.c3 {
    height: 500rpx; /* 从px调整为rpx */
    /* 其他样式保持不变 */
}

5. 真机测试与调试

多在不同型号的真机上进行测试，使用微信开发者工具的远程调试功能来观察样式在真实环境中的应用情况，并据此调整样式。

结论

通过上述建议调整后，你应该能看到页面在不同设备上的表现更为一致。关键是采用更灵活的布局策略（如Flexbox）、合理使用尺寸单位（rpx）、以及减少对固定定位的依赖。记得每次修改后都要进行充分的测试，确保修改有效且没有引入新的问题。