数据显示，大多数访客会通过手机访问你的名片和主页。 因此，在完成桌面端设计后，花几分钟检查并优化移动端显示效果非常重要。 名片岛的编辑器为移动端适配提供了完整的工具支持。
切换到移动端预览
- 进入主页编辑器
- 找到编辑器顶部工具栏中的设备切换按钮
- 点击手机图标切换到移动端视图
- 画布会缩小为手机屏幕宽度（375px），模拟手机访客看到的效果
点击桌面图标可随时切换回桌面端视图，两种视图可以随意来回切换。
移动端独立布局
名片岛采用桌面端和移动端完全独立的布局系统。 这意味着你可以为同一个模块设置不同的移动端位置和尺寸， 而不会影响桌面端的显示。
在移动端视图下，你可以：
- 单独调整每个模块的位置（拖拽标题栏）
- 单独调整每个模块的宽度和高度（拖拽右下角控制点）
- 这些改动只影响移动端，桌面端不受影响
一键生成移动端布局
如果你不想手动逐个调整，可以使用编辑器提供的「生成移动端布局」功能：
- 切换到移动端视图
- 点击顶部工具栏中的「生成移动端布局」按钮
- 系统会自动将桌面端的所有模块按 Y 轴顺序垂直排列
- 宽度自动缩放适配手机屏幕，高度等比调整
自动生成后，你可以在此基础上手动微调，效率更高。
控制模块的设备可见性
某些模块可能只适合在桌面显示，或者只在手机上才需要。 你可以为每个模块单独设置设备可见性：
- 两端都显示：默认设置，桌面和手机均可见
- 仅桌面显示：该模块在手机上自动隐藏
- 仅移动显示：该模块在桌面端自动隐藏
设置入口：选中模块 → 右侧属性面板 → 「可见性」设置。
移动端优化建议
以下是一些常见的移动端适配技巧：
- 文字太小：在移动端视图下拉宽该模块的宽度， 或在属性面板中适当调大字体大小
- 内容超出屏幕：检查模块的宽度是否超过屏幕宽度（375px）， 拖动右侧边缘将宽度收窄到屏幕内
- 模块间距太密：在移动端视图下手动向下拖动后续模块， 增加垂直间距
- 图片显示不全：检查图片模块的高度是否足够， 或将图片裁切比例改为更适合竖屏的比例
推荐工作流程
- 先在桌面端视图完成整体布局设计
- 切换到移动端视图，使用「生成移动端布局」获得初始移动端布局
- 逐个检查各模块在手机上的显示效果，做必要的微调
- 使用手机实际访问你的主页 URL 进行最终验证
建议在发布重要更新后，用自己的手机打开链接实际查看一遍效果。