如何在桌面视图下更改应用viewport？参考Chakra UI Pro视图切换功能

核心思路 #

通过创建视图切换控制器和自适应容器，修改容器的尺寸、样式来模拟不同设备的显示效果，和你提到的示例功能逻辑一致。

具体实现步骤 #

1. 构建视图切换控制器

创建一组按钮组件，用来切换不同的设备视图模式，通过状态管理记录当前选中的视图类型：

import { useState } from 'react';
import { ButtonGroup, Button } from '@chakra-ui/react';

const ViewportSwitcher = ({ onViewportChange }) => {
  const [activeViewport, setActiveViewport] = useState('desktop');
  
  const handleSwitch = (viewport) => {
    setActiveViewport(viewport);
    onViewportChange(viewport);
  };

  return (
    <ButtonGroup spacing={2} mb={6}>
      <Button 
        variant={activeViewport === 'mobile' ? 'solid' : 'outline'}
        onClick={() => handleSwitch('mobile')}
      >
        Mobile
      </Button>
      <Button 
        variant={activeViewport === 'tablet' ? 'solid' : 'outline'}
        onClick={() => handleSwitch('tablet')}
      >
        Tablet
      </Button>
      <Button 
        variant={activeViewport === 'desktop' ? 'solid' : 'outline'}
        onClick={() => handleSwitch('desktop')}
      >
        Desktop
      </Button>
    </ButtonGroup>
  );
};

2. 创建自适应视图容器

根据选中的视图类型，为容器设置对应设备的尺寸、阴影、圆角等样式，模拟设备屏幕效果：

import { Box } from '@chakra-ui/react';

const ViewportContainer = ({ children, currentViewport }) => {
  const getContainerProps = () => {
    switch(currentViewport) {
      case 'mobile':
        return {
          maxW: '375px',
          mx: 'auto',
          boxShadow: '2xl',
          borderRadius: 'xl',
          overflow: 'hidden',
          bg: 'white',
        };
      case 'tablet':
        return {
          maxW: '768px',
          mx: 'auto',
          boxShadow: '2xl',
          borderRadius: 'xl',
          overflow: 'hidden',
          bg: 'white',
        };
      case 'desktop':
        return {
          maxW: '1200px',
          mx: 'auto',
          w: '100%',
        };
      default:
        return {};
    }
  };

  return <Box {...getContainerProps()}>{children}</Box>;
};

3. 整合组件到应用中

在你的应用根组件或者目标页面中，组合上述两个组件，实现视图切换功能：

import { useState } from 'react';
import { ViewportSwitcher } from './ViewportSwitcher';
import { ViewportContainer } from './ViewportContainer';

const AppShell = () => {
  const [currentViewport, setCurrentViewport] = useState('desktop');

  return (
    <Box p={4}>
      <ViewportSwitcher onViewportChange={setCurrentViewport} />
      <ViewportContainer currentViewport={currentViewport}>
        {/* 这里放入你的应用核心内容 */}
        <Box p={4}>
          {/* 示例内容：响应式布局的导航、页面主体等 */}
        </Box>
      </ViewportContainer>
    </Box>
  );
};

export default AppShell;

优化建议 #

• 若需要更逼真的设备外观，可以给移动端/平板端容器添加设备外壳的背景图，或者用CSS绘制设备边框细节
• 确保应用本身的响应式样式（比如Chakra UI的断点配置）能在容器内正常触发，保证模拟效果的准确性
• 可添加本地存储逻辑，记录用户上次选择的视图类型，下次打开时自动恢复

内容的提问来源于stack exchange，提问作者Karolis