This CSS works: 

```css
@media (max-width:1023px) {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width:1024px;    
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
        min-width: 1024px;
    }    
}

@media (min-width:1024px)  {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
    }
}

```

So, for small resolutions there is `min-width: 1024px;` option in browser output: but this doesn't change anything - still on small resolutions browser tries to put whole document in current resolution limits.

What is with 1024px resolution width:

![enter image description here](https://i.stack.imgur.com/6csfY.png)

What is with small screen:

![enter image description here](https://i.stack.imgur.com/4Wbck.png)

That's why I want to use width for small resolution - to be page displayed with 1024px's width, and visible part on these screens will be theis resolution with scrolling lefr-right