Google Material Design Resizer0.1.0
在 Google Resizer 工具 (https://material.io/resizer/) 中覆盖当前页面。仅限 HTTPS。在来自 Google 的新交互式查看器中的不同断点(桌面、移动、平板电脑)处预览您的页面。甚至无需打开新标签!更新以使用 HTTPS。它也适用于 localhost / 127.
更新日期:2021年 8月 29日分类标签:开发语言:中文平台:
37.17KB 0 人已下载 手机查看
简介:
在 Google Resizer 工具 (https://material.io/resizer/) 中覆盖当前页面。仅限 HTTPS。在来自 Google 的新交互式查看器中的不同断点(桌面、移动、平板电脑)处预览您的页面。甚至无需打开新标签!更新以使用 HTTPS。它也适用于 localhost / 127.0.0.1 URL,在本地开发时完美!用法单击该按钮,将显示 Google Material Design Resizer (https://material.io/resizer/) 与当前加载的 URL 的叠加层。再次单击以隐藏叠加层并返回到您的网站。需要 HTTPS该扩展程序现在支持 HTTPS 页面。实际上,不仅如此:Google Resizer 现在*需要 HTTPS 页面*。在仅支持 HTTP 的网站上使用扩展程序(或直接使用 Google Resizer 网站)将使 Google Resizer 进入无限刷新循环。这是由于 Google Resizer 强制使用 `Upgrade-Insecure-Requests` 标头 (https://developers.google.com/web/fundamentals/security/pvent-mixed-content/fixing-mixed-content#upgrading_insecure_requests),从而强制要通过 HTTPS 加载的任何 HTTP 资源。该指令*级联到 iframes*,意味着非 HTTPS 页面永远不会被 Google Resizer 工具加载。由于现在大多数网站都可以通过 HTTPS 访问,因此主要问题是本地开发。要通过 HTTPS 访问您的本地页面,您可以: – 在您的本地服务器上启用 HTTPS。例如,请参阅 BrowserSync 中的 [`https` 选项](https://browsersync.io/docs/options#option-https) – 使用 SSL 代理,如 [ngrok](https://ngrok.com/docs#bind-tls)。回馈“按原样”提供。它可能仍然存在错误,请在 https://github.com/julienma/google-design-resizer-chrome-extension/issues 上报告它们笔记这与 Google 没有任何关联。一些素材是 © Google,最值得注意的是用于图标和网站的源图片(https://material.io/resizer/static/material-io-nav/static/images/resizer_dark.svg)(https://material.io/resizer/static/material-io-nav/static/images/resizer_dark.svg) material.io/resizer/) 加载到框架中。