0

I want to show the screen in "100%" size in IE with CSS. The default zoom size for IE for my clients' computer is 150%. To show the screen properly without asking my clients to change the default zoom setting, I thought I can set the css 67%.(150% x 67% = 100.5%)

I have tried both "zoom : 67%" and "transform : scale(67%)", but neither of them worked properly.

Does anybody have idea how to fix the problem with CSS?

"The easiest way to fix would be NOT writing any CSS and Asking my client to see the page with 100%"... hope somebody can solve this. I have tried the width: 1920px, and it also didn't work.

Hope the code below helps. I am currently using lowcode platform Mendix and customizing the given layouts.

.layout-atlas-responsive-default {
$sidebar-width: 60px;
zoom: 67%;

//.mx-placeholder seems to decide the width
//.mx-placeholder{
//width: 1920px;

@media (min-width: $screen-md) {
    .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
        width: $sidebar-width!important;

        .mx-scrollcontainer-wrapper > .mx-navigationtree ul li {
            &.mx-navigationtree-has-items:hover {
                a {
                    background-color: $navsidebar-sub-bg;
                    font-size: 14px;
                    color: white;
                }

                a:hover{

IE default zoom(sorry it's in Japanese, but hope you understand what I meant)

CSS 67% zoom with default IE screen (150%)/ The Screen I got :(

no CSS zoom with IE screen(100%)/ The screen I want :)

CSS 100% zoom with default IE screen (150%) / The screen I want to change from. When I changed the IE screen zoom to 100%, it looked properly.

set the width: 1920px

Yuki
  • 1
  • 1
  • Do you mean that your app looks smaller even though the zoom has set to 150% and you want to display it properly by covering the whole screen? If not, please provide more information about it. I suggest please share the sample code that we can use to reproduce the issue with the IE 11 browser. It can help us to understand the issue in a better way. – Deepak-MSFT Nov 10 '20 at 03:29
  • Thank you for the comment! I want any CSS function that have same behavior with "Ctrl + " "Ctrl - " for IE. I have updated the question, I hope the new explanation helps. – Yuki Nov 11 '20 at 00:43
  • did you try to make a test with the `zoom:100%`? did it work? What result did it give you? – Deepak-MSFT Nov 11 '20 at 09:41
  • It gave me the same result as "no CSS zoom". But since the default zoom size is 150%, the screen is quite large. I have updated the image as well. – Yuki Nov 12 '20 at 04:10
  • I suggest you make a test with the sample code suggested in this [answer](https://stackoverflow.com/a/9441618/10309381). See whether it helps to display the site properly. – Deepak-MSFT Nov 12 '20 at 07:41
  • @Deepak-MSFT Thank you for the suggestion. I have tried the code, unfortunately, it gave me the same look as the [second capture](https://i.stack.imgur.com/LQsNX.png) – Yuki Nov 13 '20 at 00:33
  • In that case, I suggest you try to modify the code of the site and try to make it responsive so that it can scale it as per the screen size and it gets a display properly. – Deepak-MSFT Nov 13 '20 at 08:45
  • Thank you Deepak, sorry I don't get that yet.. Do you mean I should change '@media (min-width: $screen-md) ' part? Not the 'zoom' 'transform : scale'? – Yuki Nov 15 '20 at 12:00
  • What I mean is try to write your media queries properly so that the web page adjusts itself according to different screen size and get display properly. – Deepak-MSFT Nov 16 '20 at 02:12

0 Answers0