Web开发：在浏览器中模拟iphone有一个缺口
Web development: Simulate iphone with a notch in the browser
我正在开发一个网站，希望与 'notched' iphone 的（Iphone X、11 等）兼容，但我无法做到找到一个工具来正确模拟我的网站在这些类型的 iPhone 上的外观。
例如，这个 footer with icons 被底栏穿过。当应用程序作为 PWA 加载或浏览器的 'bottom action menu' 折叠时会发生这种情况。
除了在 phone.
上加载网站外，似乎没有其他解决方案
这些是我的研究结果：
- Safari：不提供在缺口 iphone
上模拟网站的选项
- Chrome: 有一个选项可以在 iphone X 的尺寸中显示浏览器，但它不模拟缺口或底栏。
- Firefox：不提供选项
我在 Mac.
上找到了执行此操作的方法
运行 /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator -CurrentDeviceID 8528838E-4B47-4F0E-B415-E87F8C8A6163 启动一个 iphone 模拟器，您可以使用它来访问本地主机。你也可以在这个模拟器上安装pwa看看效果如何
在此 article
中找到解决方案
我正在开发一个网站，希望与 'notched' iphone 的（Iphone X、11 等）兼容，但我无法做到找到一个工具来正确模拟我的网站在这些类型的 iPhone 上的外观。
例如，这个 footer with icons 被底栏穿过。当应用程序作为 PWA 加载或浏览器的 'bottom action menu' 折叠时会发生这种情况。
除了在 phone.
上加载网站外，似乎没有其他解决方案这些是我的研究结果：
- Safari：不提供在缺口 iphone 上模拟网站的选项
- Chrome: 有一个选项可以在 iphone X 的尺寸中显示浏览器，但它不模拟缺口或底栏。
- Firefox：不提供选项
我在 Mac.
上找到了执行此操作的方法运行 /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator -CurrentDeviceID 8528838E-4B47-4F0E-B415-E87F8C8A6163 启动一个 iphone 模拟器，您可以使用它来访问本地主机。你也可以在这个模拟器上安装pwa看看效果如何
在此 article
中找到解决方案