CODEWITHSUNDEEP
google-chromeemulationmicrosoft-edgesurface-pro
Dan
Dan

Reputation: 573

How to emulate Surface Pro 4 in browser

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 Here is Surface Pro 4 Hardware - Notice buttons are wrapping

Next one is iPad Hardware (I don't believe it's the pro version) 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 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. 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 Finally, the standard appearance in Chrome

Upvotes: 1

Views: 2817

Answers (1)

Zhi Lv
Zhi Lv

Reputation: 21636

It seems that the emulation works well on my side. please check the following screen shots:

Edge emulation for iPad, enter image description here

Edge emulation for Surface Pro 4, enter image description here Chrome emulation for iPad: enter image description here Chrome emulation for Surface Pro 4: enter image description here

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: enter image description here

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

Upvotes: 0

Related Questions