41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
var isInMobile = false;
|
|
|
|
// Создаём экземпляр ResizeObserver с функцией-колбэком
|
|
const jsinjectObserver = new ResizeObserver((entries) => {
|
|
for (let entry of entries) {
|
|
const rect = entry.contentRect; // Размеры контентной области
|
|
console.log('Новые размеры:', rect.width, 'x', rect.height);
|
|
|
|
if (isInMobile) {
|
|
// Здесь можно выполнять любые действия при изменении размера
|
|
entry.target.style.borderColor = `hsl(${rect.width % 360}, 50%, 50%)`;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Начинаем наблюдение за конкретным элементом
|
|
const jsSideNav = document.querySelector('.side-nav');
|
|
jsinjectObserver.observe(jsSideNav);
|
|
|
|
|
|
function jsinject_init() {
|
|
let navy = document.getElementById('side-nav');
|
|
if (visualViewport.width < visualViewport.height) {
|
|
document.body.style.width = '100%';
|
|
navy.style.width = '6px';
|
|
navy.onclick = (function () {
|
|
if (navy.clientWidth > 6) {
|
|
navy.style.width = 6;
|
|
}
|
|
else {
|
|
navy.style.width = document.body.clientWidth + 'px';
|
|
}
|
|
});
|
|
isInMobile = true;
|
|
}
|
|
else {
|
|
document.body.style.width = '80%';
|
|
document.body.style.margin = 'auto';
|
|
navy.style.left = document.body.clientLeft + 'px';
|
|
}
|
|
} |