问题 #1024💬 已回答提出于 2018年4月10日作者 tommedema0 个反应

真实响应式设备模式

快速解答作者 nojacko

把你的CSS构建成“最小宽度”而不是“最小设备宽度”等等......一切都很好。

阅读下方完整回答 ↓

问题

你可能会认为将iframe的宽度改成设备宽度和设备模拟器的作用是一样的,但实际上并非如此(https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports)。 举个例子:如果你在宽度为320px的iframe中加载[pages.github.io](pages.github.io),你会得到: <img width=“359” alt=“截图 2018-04-09 4点44分 24分” src=“https://user-images.githubusercontent.com/331833/38528599-4c6ef62c-3c15-11e8-97e6-6c2bf2448da5.png”> 你可以自己试试: 如果你进入 pages.github.io 并启用Chrome开发工具模拟相同宽度(320px)的设备,响应会好很多: <img width=“385” alt=“截图 2018-04-09 下午4点45分” src=“https://user-images.githubusercontent.com/331833/38528633-6743c5cc-3c15-11e8-97ff-24afbf514a7f.png”> 这里发生的是浏览器实际上尊重页面的强...

回答(3)

nojacko2018年4月13日

把你的CSS构建成“最小宽度”而不是“最小设备宽度”等等......一切都很好。

tommedema2018年4月13日

@nojacko这假设我能控制CSS。事实并非如此;)

此外,上述示例未使用“最小设备宽度”。它只是用“宽度:900px”。小型设备足够智能,可以相应地扩展规模。真正的响应式模式也会做到同样的效果。

artf2018年4月14日

谢谢你的建议,@tommedema但目前我觉得没必要开始做这种改进,如果你想构建响应式模板,目前的实现是可行的,这才是真正重要的。顺便说一句,如果你真的想改进,欢迎PR们来:)

相关问答

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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