I'm trying to use chrome device mode on my linux machine, but opposite to my mac, it doesn't give me grid, nor black panel to choose device. It also doesn't have option to resize screen size, while on mac this options are present. I'm using chrome version 38. So it should all work, but unfortunately, it doesn't.
Sorry, can't post picture, as I need 10 reputation points.
Does any of you gone through this problem?
Cheers!
Related
Steps to reproduce:
Go to this demo
Open dev tools on Chrome (ensure you are at least on 108 or above)
Toggle the device tool bar
Select any mobile device
Select the body element in dev tools
Witness the fact that there is a lot of extra space after the body.
The same result cannot be reproduced by resizing the browser window, you must use either the device tool bar or a real mobile device.
I have tried Chrome on Linux, Mac, and Android, all face this issue. Firefox on Linux, Mac and Android do not face this issue. Safari on iOS and Mac do not face this issue. So it really is just Chrome.
I'm a bit confused on why this could be happening and how I might be able to fix it.
I have tried playing with overflow settings on the body tag. I have also tried playing with width and height fit-content. Neither have solved this issue for me. Maybe this is a bug with the svh and svw units I am using?
I have a user who is using my web app on a Surface Pro 4. The app doesn't render very well. The best way I can describe it is that it appears the browser window has been resized to a small size and it's trying to bunch stuff up. However, I believe he has his browser maximized.
Since I don't have a Surface, I've been trying to get both Chrome and Edge to emulate the rendering issues. Here's what I've tried:
Edge: Has a preset for the Surface Pro 4. I figured that once I selected this mode I would see the problem. It's actually the opposite situation. I actually have to expand the browser window to multiple displays to be able to see all the content (even the browser scrollbars). I suspect that's due to the Surface having a higher resolution than my PC.
Chrome: No preset for the Surface and I couldn't find anyone who had the specific settings. I tried 2738 x 1834 and all three of the built-in pixel ratios (1.0, 2.0, 3.0). Chrome zoomed out so that it all fit on my screen. It also had no rendering issues. Changing pixel ratio made no difference.
I'll admit that web UI development is not my strong suit. And it doesn't help that I inherited a lot of this code. But I'm really scratching my head here.
If I try to emulate with a phone preset, then I can see rendering issues because the app isn't phone friendly, nor does it really need to be. That seems to suggest the emulation in the browser is working fine. What's left? The only thing I can think is that he must be using some kind of scaling that's messing things up.
Also, I should note that I had a friend with an iPad (Sorry don't know what model) try the app out as well and he also sees the same bad rendering issues. In fact, he thinks it's rendering worse than the Surface.
Edit 1:
I put together a test page that shows the header from our app. It is here: https://app.astrolabe-analytics.com/surfaceTest
Here are screenshots of the various displays being tested:
Here is Surface Pro 4 Hardware - Notice buttons are wrapping
Next one is iPad Hardware (I don't believe it's the pro version)
Then here is the way I have Chrome set up to emulate the Surface Pro
Surface Pro 4 emulation in Edge. Note that I had to extend the browser window onto my second monitor to take the screenshot.
Finally, the standard appearance in Chrome
It seems that the emulation works well on my side. please check the following screen shots:
Edge emulation for iPad,
Edge emulation for Surface Pro 4,
Chrome emulation for iPad:
Chrome emulation for Surface Pro 4:
Besides, I also found that if we resize the browser window (change the width property), if the width is too small, the text will wrap or disappear. Please check this image:
So, I suppose the issue is related to the CSS style, as a workaround, you could try to set fixed width property (or using the min-width property) for the navbar-nav class, also, you could refer to the following links to use Bootstrap navbar styles:
Bootstrap Navbar
Angular Bootstrap navbar
I am running Chrome 65 and since the last upgrade whenever I try and activate the device mode in developer tools (i.e. to see how the page would look like on a mobile phone), only the top left quadrant of the window is displayed correctly. The remaining 75% of the screen is left white (but very strangely accepts input)
I was experiencing the same issue in Chrome 65. Today, I saw that there was a pending update in Chrome. I installed this update and noted that the issue was gone.
The new update has the following version number (at least on my machine): 65.0.3325.162
I have Chrome 39.0.2171.95 m on Windows 7 64. But there is no Mobile Emulation in my Chrome. I have Dell Notebook 15.6 inches screen size. May small screen size be the reason? How to enable Mobile Emulation?
No Overrides option in my Chrome:
Chrome with Overrides option:
Hotkey: CTRL-SHFT-M
To enable it with hot keys, CTRL-SHIFT-M should work from anywhere in the debugger and may be easier to use than looking around for the new icons as they moved around in the last few versions of Chrome.
Finding Device Mode via the new icons in the GUI:
In recent versions of Chrome they have moved device mode support to its own cellphone like icon:
They have also moved the Emulation Panel into submenus, toggled by the >= icon:
But the panel is only configurable when the device mode icon is already enabled.
Note the device mode icon selected(blue) in the top left and the submenu icon selected on the top right. Though they may be in different locations in some versions.
I am using the following test setup (Latest meaning as of July 14th 2012):
Core i7 with an ATI FirePro V9800 (Eyefinity)
Windows 7 Pro 64 Bit (latest updates / patches)
Latest Catalyst drivers
Latest Google Chrome Stable / Canary.
6 x 1080p displays (in a row) resulting in a 11520px by 1080px desktop.
I have tried the following to get a fullscreen web view across displays:
Set the maximize to whole desktop setting in the Catalyst control panel. That works for maximizing normal windows (except Chrome), but not for anything fullscreen.
Tried Chrome Kiosk mode (that would be ideal), same problem, only fills up primary display.
Using Chrome Fullscreen or HTML5 fullscreen API results in the same: Fullscreen on a single of the 6 monitors.
IE9 seems to have a limitation of about 10000px for the webview, thus i cannot even stretch it across the entire desktop manually (that works with Chrome).
Tried UltraMon.
Tried a number of Chrome command line switches (http://peter.sh/experiments/chromium-command-line-switches/) for kiosk mode, start in fullscreen etc., so right now using the --app="http://127.0.0.1/index.html" switch to at least get rid of most of Chrome's UI elements.
Tried to find an extension for Chrome, but no success.
Tried Chrome Frame in IE9, also only uses one display.
I understand it is most probably a driver issue reporting the wrong desktop size to Chrome (which I thought was the point of the Catalyst Maximize to full desktop size function). Chrome does not seem to get the desktop size from the same place as other "normal" windows do (obviously not very familiar with Windows windowing).
I would like to work on a full-screen Chrome webview across multiple monitors or a completely chromeless window that I can manually maximize. My browser configuration is flexible, even the OS is somewhat flexible.
I would like to know:
Has anyone gotten a fullscreen browser view across more than 1 monitor to work with Chrome (or any browser)?
Are there any tools that can fake the right (full) display size to Chrome?
Could this be workable in Windows 8?
Is there something that just displays a Chromeless Chrome browser that runs the very latest Chrome? (I have seen awesomium, but find that its price is too high for what I want it to do). Also I want to be able to use the most recent Chrome releases ideally.
Any comments welcome and sorry for the lengthy details.
Thanks for reading!
-Tobi
This worked for me using two monitors:
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain1.com" --window-position=0,0 --kiosk --user-data-dir=c:/monitor1
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain2.com" --window-position=1680,0 --kiosk --user-data-dir=c:/monitor2
I think the order of the parameters is relevant.