uniapp app获取屏幕宽度

在uniapp中，可以使用uni.getSystemInfoSync()方法获取设备信息，其中包括设备屏幕宽度。示例代码如下：

// 获取设备信息
const systemInfo = uni.getSystemInfoSync();
// 获取屏幕宽度
const screenWidth = systemInfo.screenWidth;
console.log(screenWidth);

在上述代码中，`uni.getSystemInfoSync()`方法会同步获取设备信息，返回一个包含设备信息的对象`systemInfo`，包括屏幕宽度、高度等信息。我们可以通过`systemInfo.screenWidth`属性获取屏幕宽度。

相关问题

uniapp nvue 自适应宽度

Uniapp 是一个跨平台的开发框架，可以用于开发 iOS、Android、H5 和小程序等多个平台的应用。NVue 是 Uniapp 提供的一种渲染引擎，它可以在不同平台下提供一致的 UI 表现和交互体验。其中，nvue 的自适应宽度是指在不同设备上，根据屏幕大小自动调整元素的宽度，以适应不同的分辨率和设备屏幕尺寸。

为了实现 nvue 的自适应宽度，可以使用 rpx 单位来代替 px 单位。rpx 是一种相对单位，它可以根据屏幕宽度进行换算，以实现不同屏幕下的一致性。在 nvue 中，可以使用 rpx 来设置元素的宽度、高度、边框、字体等相关属性。

如果你想在 Uniapp 中使用 nvue 的自适应宽度，可以按照以下步骤进行操作：
1. 在 nvue 文件中使用 rpx 单位来设置元素的相关属性。
2. 在 pages.json 文件中设置 "nvue": true，以启用 nvue 渲染引擎。
3. 在 App.vue 文件中添加以下代码：

<script>
    export default {
        onLaunch: function() {
            uni.getSystemInfo({
                success: function(res) {
                    uni.$app.$options.globalData.rpxRatio = res.windowWidth / 750;
                }
            });
        }
    }
</script>

以上代码的作用是获取当前设备的屏幕宽度，并将其与设计稿的宽度比例保存在全局变量中，以便在后续的样式中使用。

uniapp自动修改屏幕宽高

Uniapp 可以通过 `uni.getSystemInfo` 方法获取设备信息，包括屏幕宽高等信息。可以在 `onLoad` 或 `onReady` 生命周期内获取设备信息，然后根据设备的屏幕宽高动态修改页面元素的大小和布局。

例如，可以在 `onLoad` 生命周期内获取设备信息并设置 `rootFontSize`，然后在样式表中使用 `rem` 单位来布局页面，以实现自适应屏幕大小的效果：

onLoad() {
  uni.getSystemInfo({
    success: res => {
      // 设备屏幕宽度除以 375（设计稿宽度）并乘以 100，得到 rootFontSize
      const rootFontSize = (res.windowWidth / 375) * 100
      // 将 rootFontSize 设置为 html 的 font-size
      uni.$emit('setRootFontSize', rootFontSize)
    }
  })
}

在 App.vue 中监听 `setRootFontSize` 事件，然后设置 html 的 font-size：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    uni.$on('setRootFontSize', rootFontSize => {
      document.documentElement.style.fontSize = `${rootFontSize}px`
    })
  }
}
</script>

<style>
/* 使用 rem 布局 */
.example {
  width: 3.2rem;
  height: 1.6rem;
}
</style>

这样，无论设备屏幕大小如何，页面元素的大小和布局都会自动适应屏幕大小。