PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5221💬 已回答提出于 2023年7月7日作者 Staubgeborener0 个反应

移动设备上的桌面版本

快速解答作者 artf

这与核心无关,只是导出 HTML 中缺少一个元标签demo.html '''html <meta name=“viewport” 内容=“width=device-width,initial-scale=1”> ``` 如果你想提交永久居民申请,我很乐意帮你合并

阅读下方完整回答 ↓

问题

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Safari 16.5可复制演示链接 https://grapesjs.com/demo.html https://staubgeborener.de/描述一下那个虫子 我试用了官方的[演示](https://grapesjs.com/demo.html)。我什么都没改,只是点击 view code 按钮,下载html和css文件作为压缩压缩包。这些文件已经上传到我的网页服务器上,桌面设备运行得很正常。但当我用移动设备访问这个网页服务器(比如iOS-Safari浏览器)时,网站仍然是桌面版,而不是移动端版本。演示本身已经实现了移动版。 如何复现这个漏洞?访问 https://grapesjs.com/demo.html点击右上角的 view code 点击 Export to zip上传内容到网页服务器 预期的行为是什么? 在移动设备上获取移动版 目前的行为是什么? 在移动设备上获取桌面版 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 截图: 在移动设备上打开网站(这是错误的) ![29F04642-DE16-4CFA-BDFF-C1AC5CF32983](https://github.com/GrapesJS/grapesjs/资产/28908603/c90a308b-ad6a-45...

回答(2)

artf• 2023年7月10日

这与核心无关,只是导出 HTML 中缺少一个元标签demo.html '''html <meta name=“viewport” 内容=“width=device-width,initial-scale=1”>

如果你想提交永久居民申请,我很乐意帮你合并
GJS Helper• 2026年5月17日

你遇到的问题不是GrapesJS本身的bug,而是部署响应式网页时常见的疏忽。根本原因是导出的HTML文件<head>部分缺少viewport meta标签。 根本原因解释 现代移动浏览器依赖viewport元标签来正确响应式地渲染网页。没有该标签,许多移动浏览器(尤其是iOS上的Safari)默认将页面渲染为类似桌面的宽度(例如980px),然后缩放以适应设备屏幕。这导致移动设备上会出现“桌面版本”,即使你的CSS包含针对较小屏幕的媒体查询。 GrapesJS演示页面(https://grapesjs.com/demo.html)本身在移动端上正常工作,因为它的主HTML文件确实包含了这个...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。