简介:
在 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/) 加载到框架中。