在前端开发中，获取屏幕或盒子内容的宽高是一项常见且重要的任务。无论是使用 Uniapp 还是 Vue 框架，都有多种方法可以实现这一目标。下面我们将详细探讨这些方法。

在 Uniapp 中，可以通过 uni.getSystemInfoSync() 方法获取屏幕的相关信息，包括屏幕的宽度和高度。以下是示例代码：

const systemInfo = uni.getSystemInfoSync();
const screenWidth = systemInfo.screenWidth;
const screenHeight = systemInfo.screenHeight;
console.log(`屏幕宽度: ${screenWidth}, 屏幕高度: ${screenHeight}`);

还可以使用 window.innerWidth 和 window.innerHeight 来获取屏幕的宽度和高度，但需要注意在某些移动端可能存在兼容性问题。

对于获取盒子内容的宽高，在 Uniapp 中可以使用 DOM 操作获取元素，然后通过 offsetWidth 和 offsetHeight 属性获取其宽高。

在 Vue 中，获取屏幕宽高可以通过在组件的 mounted 生命周期钩子中使用 window.innerWidth 和 window.innerHeight 来实现。

mounted() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  console.log(`屏幕宽度: ${screenWidth}, 屏幕高度: ${screenHeight}`);
}

要获取盒子的宽高，Vue 中可以给元素添加 ref 属性，然后通过 this.$refs[refName].offsetWidth 和 this.$refs[refName].offsetHeight 来获取。

另外，还可以使用第三方库，如 element-resize-detector 来监听元素的大小变化。

无论是在 Uniapp 还是 Vue 中，根据具体的项目需求和场景选择合适的方法来获取屏幕或盒子内容的宽高是至关重要的。在实际开发中，需要考虑兼容性、性能等因素，以确保应用的稳定和流畅运行。

熟练掌握获取屏幕或盒子内容宽高的方法，能够为我们开发出更具交互性和用户体验良好的应用提供有力的支持。通过合理运用这些方法，我们可以更好地适应不同的屏幕尺寸和布局需求，为用户带来更加优质的使用体验。