9

Has anyone noticed a black bar at the top of the dev tools mobile view when looking at the iPhone6 view?

I'm using Version 45.0.2454.93 (64-bit).

I tried a couple of apps, and the same thing happened when looking at iPhone 6 mode.

Highlighting the HTML tag shows it's not inside the HTML, does anyone know of a way to remove it?

Screenshot of black bar

Ben Taliadoros
  • 7,003
  • 15
  • 60
  • 97
  • 3
    Seeing this too. There are other options which seem to black out where they might show on the screen, see [here](https://xbenjii.co.uk/i/8ukJJ). There's a possibility that the black bar is showing where the top bar on the iPhone will be, but don't quote me on that. – Ben Fortune Sep 17 '15 at 09:44
  • 3
    Note that it does it with others too, such as the Google Nexus 4/5/6. – Ben Fortune Sep 17 '15 at 09:51
  • Looks like it's to do with the introduction of that feature you mentioned, thanks – Ben Taliadoros Sep 17 '15 at 10:21

5 Answers5

3

To be honest, I can't find any official statement that explains it, but looking through the device emulator options it seems these are "placeholders" for the typical navigation bar and keyboard areas on different devices.

If you check the option just next to the "Device" dropdown list, you'll see a few options that affect these (almost) black areas:

Chrome Device Emulator

With that said, I don't think there is really a way to disable these.. You could click the "Reset all overrides" link to the left of "Device" and manually set a screensize, but then you'd lose the device-specific emulation and it would report as a standard desktop browser with a specific window size, much like simply resizing your browser.

  • I know it's related, but I think it's a bug, I was on default view, so no navigation bar. I've submitted the bug to chrome, we'll see. – Ben Taliadoros Sep 17 '15 at 15:58
  • Fair enough, but keep in mind the "default" view as you say will also include a top title bar.. Still, I agree with the bug report idea, because I believe that top bar disappears when viewing a webpage in full screen. –  Sep 17 '15 at 17:02
  • @BenTaliadoros Do you have a link to that bug report? Curious to see if it is a bug. I think it is but I'm not positive. – Bill Criswell Oct 16 '15 at 15:14
  • I can't find one, any idea of where to look to find previously submitted bugs? – Ben Taliadoros Oct 20 '15 at 14:22
2

I also found this annoying since I'm prototyping full-screen cordova apps, which do not have the Safari navigation bar.

A temporary workaround I use is to uncheck the "Emulate mobile" option and refresh the page. enter image description here

Tyler Bengtson
  • 116
  • 1
  • 3
2

I ran into this as well a little while ago, since I was using Chrome Dev Tools' iPhone 6 emulator for quick Cordova app development. While you can't get the default iPhone 6 preset to work without those black bars, you can create a new preset that'll strip them for you.

With the Dev Tools inspector open, click the 3-dot stacked hamburger menu in the upper-right and choose Settings (or just press F1). Then in the modal that opens up, choose Devices from the left to reveal the mobile device presets. Click Add custom device... and fill it in with this info:

Emulated Devices iPhone 6 Custom Settings

Or a text version:

  • Name: iPhone 6 (No Black Bars) -- or whatever you want it to be
  • Width: 375
  • Height: 667
  • Device pixel ratio: 2

The user agent string I'm using here is as follows, but obviously feel free to customize with whatever you need for your use case.

Mozilla/5.0 (iPhone; CPU iPhone OS 9_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13C75 Safari/601.1

Then once you've saved that new custom device, close the Settings window, choose your new custom device from the Mobile Device pulldown menu, and refresh the page. You should now have a fullscreen iPhone 6 emulator.

Mike Creighton
  • 21
  • 2
1

Google Chrome Developer Tools - disable black emulation options ruler

I think the question is already answered here. That you can toggle the Device Mode

Community
  • 1
  • 1
tpsaitwal
  • 422
  • 1
  • 5
  • 23
0

The odd thing is, I only see this happening when emulating iPhone 6, it doesn't happen with any other emulators (iPhone 5, 6 Plus, etc...).

There are 8 viewport options for iPhone 6 (see screenshot below), but there are only two options (Portrait, Landscape) for the rest of them.

I think this is a good step to make the emulator act more like on a real device. Maybe as the first step, just made to iPhone 6 emulator.

viewport options

misaxi
  • 568
  • 2
  • 10