Как сделать пропорциональное уменьшение сайта без media?

Question

[bbjob]

К примеру есть сайт, 2560px в ширину. Можно ли сделать так, чтобы вплоть до 1199ти пикселей он просто, как картинка с шириной 100% уменьшался, а потом перешёл в мобильную версию, например скриптом?

Comments

[Дмитрий Беляев]

можно, но зачем костыли городить?

[bbjob]

Дмитрий Беляев, просто интересно как это реализуется

[Алексей Абрамов]

bbjob, https://developer.mozilla.org/en-US/docs/Web/API/W...

[Danny Arty]

Теоретически можно, если задать все основные величины относительными единицами.

[Антон Литвиненко]

Достаточно убрать мета вьюпорт

[Ankhena]

Вы можете задать все размеры в vw (или в других удобных вам относительных единицах измерения) и с помощью кастомных свойств.
А затем на JS при ширине меньше 1199 изменить класс body, который переопределит эти кастомные свойства.

Но какой смысл и что это упростит?

Ещё есть дурацкие варианты типа scale.
Подумайте, вот есть border в 1px. Вы его размажете сначала в 1.33 раза, потом в 2 и т.д. Зачем вам такие размазанные бревна?
Или ещё хуже с картинками. Вместо того, чтобы отдать пользователю чёткую картинку подходящего ему размера, вы выдадите ему какую-то размазню.
Аналогично и со шрифтами и т.д.

[Ankhena]

Антон Литвиненко,
Убирать meta viewport не поможет, потому что на десктопы он всё равно не действует. А на мобилках предполагается мобильная версия.

[Антон Литвиненко]

Ankhena, был уверен. Вот пример
https://mozayka.kiev.ua/

[Ankhena]

Антон Литвиненко, да, все верно. Без указания вьюпорта мобилка масштабирует как ~1000px. Как обычно не помню сколько.
Но у автора вопрос про десктопы, а на десктопах будет, всё как обычно. Т.е. какую ширину указали в стилях, такая и будет, а при меньшей будет прокрутка.

вот она

Answer 1

[true]

посмотри пример
- вроде бы всё прекрасно работает
проверь

let адаптировать_размер = function()
{
let ширина_экрана = document.body.clientWidth
if ( ширина_экрана < 1084 )
{
let отношение = ширина_экрана / 1084
главный_контейнер.style.transform = "scale(" + отношение + ")"
}
else
{
главный_контейнер.style.transform = "scale(1)"
}
}
window.onresize = адаптировать_размер
адаптировать_размер()

body { 
overflow: auto; 
flex-direction: column; 
justify-content: flex-start; 
align-items: center; 
} 
#главный_контейнер { 
width: 1024px; 
flex-shrink: 0; 
transform-origin: center top ;
}

Comments

[bbjob]

спасибо, попробую

Answer 2

[Григорий]

Писал класс для определения размеров окна

class Sizer {
    constructor(){
        document.addEventListener('DOMContentLoaded', ()=>{

            // windowHeght/Width - размер с учётом ширины скролл полосы
            // documentHeght/Width - размер с учётом ширины скролл полосы
            this.windowWidth = window.innerWidth;
            this.windowHeight = window.innerHeight;
            this.documentWidth = document.body.clientWidth;
            this.documentHeight = document.body.clientHeight;
        })

        window.addEventListener('resize', ()=>{
            this.windowWidth = window.innerWidth;
            this.windowHeight = window.innerHeight;
            this.documentWidth = document.body.clientWidth;
            this.documentHeight = document.body.clientHeight;
        })

    }

}

let sizer = new Sizer;


window.addEventListener('resize', ()=>{
    if(sizer.windowWidth < 1199){
        console.log('размер окна меньше 1199px');
        // тут можно писать что будет происходить с сайтом/разметкой/класса CSS если ширина окна меньше 1199px
    }
})

И решение самое простое

window.addEventListener('resize', ()=>{
    if(document.body.clientWidth < 1199){
        console.log('размер окна без учёта прокрутки меньше 1199px');
        // тут можно писать что будет происходить с сайтом/разметкой/класса CSS если ширина окна меньше 1199px
    }
})