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.
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 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.
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
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.