跳到主要内容

移动端支持

Ydesign 支持移动端和触屏设备吗？​

✅ 支持。在移动端浏览器上，Ydesign 编辑器会自动切换布局：顶部工具栏折叠、侧边面板改为底部抽屉、手势操作优先。用户可以在手机 / 平板上直接做设计。

移动端示例

📱 适用范围：Ydesign 针对浏览器环境设计。原生移动 App 请使用 WebView 承载，而不是打包成原生应用。

自动判断：768px 断点​

Ydesign 内部默认以 768px 作为移动端 / 桌面端的分界：

// packages/react-editor/src/utils/screen.ts
export const MOBILE_BREAKPOINT = 768;

export const isMobile = () => window.innerWidth <= MOBILE_BREAKPOINT;
export const isTouchDevice = () =>
  'ontouchstart' in window || navigator.maxTouchPoints > 0;

所有内置组件（<SidePanel />、<Toolbar />、<ZoomButtons /> 等）都会监听窗口尺寸，自动切换桌面 / 移动模式。你通常什么都不用做。

在大屏上强制移动模式​

有些场景你会希望在大屏幕里也展示紧凑版（比如把编辑器塞在一个狭窄的侧边栏里）。给任何祖先元素加上 polotno-mobile 类，Ydesign 内所有组件都会进入移动模式：

<body class="polotno-mobile">
  <div id="root"></div>
</body>

或者条件切换：

<div className={compact ? 'polotno-mobile' : ''}>
  <DesignEditorApp store={store} />
</div>

这个类名后续会逐步迁移为 ydesign-mobile，届时会通过别名保持向后兼容。

在自定义组件里同步移动 / 桌面态​

如果你写了自己的 Section / 工具栏，也希望能跟随内置切换，Ydesign 提供两个工具：

useMobile() Hook（推荐）​

响应式地拿到当前是否为移动端，组件会随 resize 自动重渲染：

import { useMobile } from '@ydesign/react-editor/utils/screen';

function MySection() {
  const mobile = useMobile();
  return (
    <div style={{ padding: mobile ? 8 : 24, fontSize: mobile ? 13 : 15 }}>
      {mobile ? '移动版布局' : '桌面版布局'}
    </div>
  );
}

mobileStyle(...)（styled-components 模板字符串）​

在 styled-components 里生成"媒体查询 + .polotno-mobile 双触发"样式片段：

import styled from 'styled-components';
import { mobileStyle } from '@ydesign/react-editor/utils/screen';

const Panel = styled.div`
  padding: 24px;
  font-size: 15px;

  ${mobileStyle(`
    padding: 8px;
    font-size: 13px;
  `)}
`;

这样即便用户给 <body> 加了 polotno-mobile 类，你的自定义组件也会跟着切到紧凑样式，体验一致。

触屏手势​

Ydesign 在移动端启用了画布专用的触摸手势：

手势行为
单指拖动移动选中元素
双指捏合缩放画布
双指平移平移画布视口
双击图片进入裁剪模式（与桌面一致）
长按元素唤出（规划中的）上下文菜单

如果你想自己扩展更多手势，直接在 <Workspace /> 的父容器上加 onTouchStart / onTouchMove 监听即可，Ydesign 不会拦截冒泡。

常见问题​

Q：我想让桌面浏览器里的编辑器永远"小屏版"。 A：把编辑器容器宽度限制在 768px 以内即可；或者给父节点加 polotno-mobile 类强制开启。

Q：某些按钮在移动端被折叠了，能不能手动强制显示？ A：内置 Toolbar 会根据空间自动折叠；想全量展示请参考 Toolbar 重写整条工具栏。

Q：微信 / 手机浏览器下双指缩放会触发整个页面放大？ A：给页面 <meta viewport> 加上 user-scalable=no, maximum-scale=1：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

这样双指手势只会作用于画布内部。

延伸阅读​