I have website which is having layout issues on certain devices which I believe I've tracked down to high res displays which also have the display scaling in windows 10 set to 200%. (not 200% in the browser, but in the display settings in the Windows Control Panel)
The problem is I don't have a device which can duplicate the resolution of these devices, which is 2736 x 1824 (it's a MS Surface Pro). Oh yeah, this only happen with Edge...
I know of sites which have VMs which will run different browsers for testing purposes, but I don't know of any which allow you to choose your resolution. Without going out and getting a hold of this specific machine, how else can I debug this issue?
You could create a custom device in the developer console, and simply display it at whatever scale actually fits on your screen. For instance, create a custom device with that particular resolution, then in the developer console on Chrome you can view it scaled down 50% (if your own resolution is 1920x1080) so that the whole thing is visible.
Turned out none of the emulation/scaling options in the dev console would emulate what was really happening. I ended up remoting into the customer's computer so I could do my own debugging on there and resolved the issue.
Seems like Edge v 44 was computing some CSS calc function for a div height incorrectly (off by 1 or 2 pixels) which was making some divs push out and mess up the layout.
The fix was to tweak the CSS so the calculation wasn't required.
Related
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 working on a web application, and I am facing a lot of issues when zooming
Here is a blueprint of the architecture of the page :
lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.
I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.
Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.
The application is very old and it's working only in IE11 compatibility mode.
So my question is, how to fix the size of the page in different resolutions without modifying the emulator?
The application works fine when you use the Emulator because you define the resolution for it and the resolution won't change when zooming in this situation.
But zoom itself is a behavior which will make the browser behave as different devices and will definitely change the resolution, so the appearance will be different.
I think you just need to make media query with the commonly used resolutions. For more information, you could refer to this thread.
I'm normally develop on hi-dpi machines (a Macbook Pro, 2018 MBA, iPhone, Pixel 2 XL). Often I'm styling something or drawing a diagram and I need to know how it's going to look when displayed on a low-dpi machine (pre 2018 Macbook Air, majority of PCs, etc...)
I tried using Chrome's devtools device emulation and it let's you set a devicePixelRatio but it's still actually rendering text and SVGs and styles in hd-dpi. (Not really sure what that setting is doing. I made to custom settings, one 1280x780 dpi = 2, and another 1280x780 dpi = 1 and switching between them changes nothing. My guess is it only changes what "windows.devicePixelRatio" and maybe what images load if using srcset and css media queries.
Is there a way to simulate low-dpi in Firefox or Chrome? Basically to get the browser to render at 1/2 the resolution and then expand with nearest neighbor filtering. I realize it will not be a perfect representation but my hope is it's good enough to check that thin lines in a diagram for example are still readable.
Well I figured out one way, at least on Mac.
Turn on OS Zoom in Settings under Accessibility
Be sure to uncheck "Smooth images". Then in Chrome or Firefox set the zoom level to 50% and turn on the OS level zoom Option+⌘+8
This does a pretty good job of looking like a low-dpi display.
Is there any way to make a preview of our template in other monitors like 14 or 15 inch monitors ?
Is there any simulator program ? I want to check that there is no horizontal scroll on screen when my web site opens .
This is a pretty quick way to test a bunch of different device viewports
http://www.benjaminkeen.com/misc/bricss/
Best of all - You can define your own viewport sizes.
I want to check that there is no horizontal scroll on screen when my web site opens .
There are several browser plugins that will simulate a resolution change by resizing the browser window. Window Resizer is one for Firefox.
Other than that, you can change your monitor's resolution to test what a site looks like on other screens. (What counts is the screen resolution, not monitor size.)
ResizeMyBrowser is my go-to for this - I just keep it open in one tab and whatever I'm working on in another, and it's easy to see all the options 'live'.
Another solution for testing your site on different resolutions is Sizer
No problems with resizing all modern browsers (32 and 64bit Windows), even their 64bit versions.
Firefox now has a native developer feature that supports resizing the viewport: Open the Firefox command line with Shift + F2, then type "resize on". Now you have a frame within the former viewport that can be shifted to the extents of your desire. You can also call a certain viewport size by entering "resize to ".
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.