New issue
Advanced search Search tips

Issue 668998 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner:
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Have option to use the actual visible width/height of the viewport (subtract browser toolbars) in device mode

Reported by mattia...@gmail.com, Nov 28 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Steps to reproduce the problem:
1. Go into responsive mode
2. Select iPhone 6 (for example)

What is the expected behavior?
For the height (in portrait) to be 559px not 667px

What went wrong?
The height is 667px which is not the height of visible area, in safari, that the user sees when the page loads.

Did this work before? N/A 

Chrome version: 54.0.2840.98  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 23.0 r0
 

Comment 1 by mattia...@gmail.com, Nov 28 2016

See this article and attached screenshot for more info/examples: http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/
iphone-6-screen-size.jpg
111 KB View Download
Owner: dgozman@chromium.org
Status: Assigned (was: Unconfirmed)
We should add screen presets for iPhone 5-7.
Cc: dgozman@chromium.org
Owner: l...@chromium.org

Comment 4 by l...@chromium.org, Dec 7 2017

Status: WontFix (was: Assigned)
Thanks for the report.  I can confirm, DevTools only uses the screen size instead of browser window size.  The post you linked seems to describe only Safari's behavior, in which the browser window size varies from 559px to 627px depending on scrolling.

One option is to introduce new preset modes: "iPhone 6 with Safari insets" and "iPhone 6 with Safari scrolling insets".  However, this list will need to be maintained depending on other browser vendor updates.  There is currently the ability to add custom device presets on your own DevTools, would this work for you?
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#adding_custom_device_presets

With our current priorities, it does not seem like it will be fixed soon, so marking as WontFix.  We still welcome contributions, so if you'd like to contribute a patch for these presets, feel free to take a look.

Comment 5 by l...@chromium.org, Dec 7 2017

By the way, there is another feature request to add controls to device mode to adjust insets.  I think this could be an opportunity to address your use case as well.
 https://crbug.com/768738 

Sign in to add a comment