search

responsively-org / responsively-app

A modified web browser that helps in responsive web development. A web developer's must have dev-tool.
https://responsively.app
GNU Affero General Public License v3.0
22.62k stars 1.17k forks source link

Adding a viewport "simulated real mode" with mockup #363

Open nasatome opened 4 years ago

nasatome commented 4 years ago

This is just an idea, you can ignore it since one can simply grab and manually add these viewports, but the truth is that for my particular case it would be useful that in the case of iphones (and nexus 5x which is a very standard resolution mobile and is the one that uses Google Chrome for its lighthouse tests) there would be some selector to switch from resolution mode to real viewport mode. (simulate the bookmarks bar, the tab bar, and the address bar of popular browsers, such as Google Chrome, Firefox on Windows and Safari/Chrome on IOS/MAC OS X)...

I put a list of Real Viewports in IOS with Safari

Model - (browser version Safari) - viewport resolution 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 plus (11.3) 414x622 / iphone 6s plus (11.3) 414x622 / iphone 7 plus (12.4) 414x622 / iphone 8 plus (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 max (13.4) 414x719 / iphone 11 pro max (13.4) 414x719

Model - (browser version Android/Chrome) - viewport resolution Nexus 5x (78) 412x604 Moto G 2nd Gen (60) 412x607 Xiaomi Redmi Note 6 Pro (78) 432x784 Galaxy J5 (60) 412x608 Samsung Galaxy S10 (78) 412x741 / Samsung galaxy note 10 (78) 412x741

I know the list can get endless, but with the iphones and the nexus 5x it would be great,

besides the desktop laptop versions, where for example in my particular website the standard resolution of the computers is 1366x768 but it turns out that their viewports are 1366 x 667, if you could add to the standard resolution the size of the Google Chrome or Firefox bar would be great.

(put a kind of mockup of the bars) I put some examples of before and after 2020-07-29_15-35

2020-07-29_15-35-with-mockup

image

Where in this last part will be simulated by operating system, and by browser, I added a checkbox of how I imagine

2020-07-29_15-38-simulated

MihailButnaru commented 3 years ago

This future is not available yet? to simulate bars? This will be important to see what the user actually sees.