使用模型添加视口"模拟真实模式"

这只是一个想法,你可以忽略它,因为人们可以简单地抓取和手动添加这些取景口,但事实是,对于我的具体情况来说,如果iphone(和连接5x是一个非常标准的解析移动,是使用Google Chrome进行其灯塔测试的),将会有一些选择器从解析模式切换到真正的取景口模式,这将是有用的. (模拟书签栏,标签栏,和受欢迎浏览器的地址栏,如Google Chrome,Firefox在Windows上和Safari/Chrome在IOS/MAC OS X上). .

我和Safari在IOS里放了一份真实的取景点清单

模型 - (浏览器版本 Safari) - 视图分辨率 iphone SE (12.4) 320x454 (iphone 5?). iphone 6 (12.4) 375x553 / iphone 6s (11.3) 375x553 / iphone 7 (12.4) 375x553 / iphone 8 (13.4) 375x553 iphone 6+ (11.3) 414x622 / iphone 6s (11.3) 414x622 / iphone 7+ (12.4) 414x622 / iphone 8+ (13.4) 414x622 iphone X(13.4) 375x635 / iphone xs (13.4) 375x635 / iphone 11 Pro (13.4) 375x635 iphone 11 (13.4) 414x719 / iphone XR (13.4) 414x719 / iphone XS 最大 (13.4) 414x719 / iphone 11 pro 最大 (13.4) 414x719

模型 - (浏览器版本Android/Chrome) - 视图分辨率 Nexus 5x (78) 412x604 (英语). Moto G 二等兵 (60) 412x607 小米·雷德米 Note 6 Pro (78) 432x784 . 银河J5(60) 412x608 三星银河 S10 (78) 412x741 / 三星银河注解 10 (78) 412x741

我知道名单会无穷无尽 但用iphone 和连接5x,这将是伟大的,

电脑的标准分辨率是1366x768, 但他们的取景口是1366x667,

(把一种模拟的酒吧) 我举出一些前后的例子 [2020-07-29 15-35] (https://user-images.githubusercontent.com/18271791/88852805-68282000-d1b4-11ea-9fed-4be43020e5e3.png) (中文(简体) ).

!. [2020-07-29 15-35- with-mockup] (https://user-images.githubusercontent.com/18271791/88852816-6cecd400-d1b4-11ea-8566-adc5e84078a2.png) (中文(简体) ).

![image] (https://user-images.githubusercontent.com/18271791/88853859-010b6b00-d1b6-11ea-93a4-5d360c26551c.png) (中文(简体) ).

最后一个部分将在哪里被操作系统模拟, 浏览器,我增加了一个复选框,我如何想象

!. [2020-07-29 15-38-模拟] (https://user-images.githubusercontent.com/18271791/88853599-95290280-d1b5-11ea-8bd9-919291f6ca30.png)