фикс автозума в чате
This commit is contained in:
parent
ff4605064d
commit
24d4cec931
@ -605,8 +605,36 @@ watch(newMessageText, (newValue) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Добавляем функцию для управления мета-тегами во время фокуса
|
||||||
|
const preventZoomOnInput = () => {
|
||||||
|
// Создаём и устанавливаем мета-тег, запрещающий масштабирование
|
||||||
|
let metaViewport = document.querySelector('meta[name="viewport"]');
|
||||||
|
if (!metaViewport) {
|
||||||
|
metaViewport = document.createElement('meta');
|
||||||
|
metaViewport.name = 'viewport';
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(metaViewport);
|
||||||
|
}
|
||||||
|
metaViewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Функция возврата обычного масштабирования
|
||||||
|
const restoreZoomBehavior = () => {
|
||||||
|
const metaViewport = document.querySelector('meta[name="viewport"]');
|
||||||
|
if (metaViewport) {
|
||||||
|
metaViewport.content = 'width=device-width, initial-scale=1.0';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Обновляем onMounted, чтобы добавить обработчики событий фокуса
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
isTouchDevice.value = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
|
isTouchDevice.value = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
|
||||||
|
|
||||||
|
// Добавляем обработчики для поля ввода, чтобы предотвращать зум
|
||||||
|
if (messageInputRef.value) {
|
||||||
|
messageInputRef.value.addEventListener('focus', preventZoomOnInput);
|
||||||
|
messageInputRef.value.addEventListener('blur', restoreZoomBehavior);
|
||||||
|
}
|
||||||
|
|
||||||
if (!isAuthenticated.value) {
|
if (!isAuthenticated.value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -652,6 +680,12 @@ onMounted(async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
// Удаляем обработчики для поля ввода
|
||||||
|
if (messageInputRef.value) {
|
||||||
|
messageInputRef.value.removeEventListener('focus', preventZoomOnInput);
|
||||||
|
messageInputRef.value.removeEventListener('blur', restoreZoomBehavior);
|
||||||
|
}
|
||||||
|
|
||||||
if (socket) {
|
if (socket) {
|
||||||
socket.off('getMessage', handleNewMessage);
|
socket.off('getMessage', handleNewMessage);
|
||||||
socket.off('messagesRead', handleMessagesReadByOther);
|
socket.off('messagesRead', handleMessagesReadByOther);
|
||||||
@ -1138,8 +1172,12 @@ const handleClickOutsideContextMenu = (event) => {
|
|||||||
padding: 0.7rem 1rem;
|
padding: 0.7rem 1rem;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
font-size: 0.95rem;
|
font-size: 16px; /* Устанавливаем оптимальный размер шрифта для мобильных устройств */
|
||||||
background: white;
|
background: white;
|
||||||
|
-webkit-appearance: none; /* Предотвращаем стилизацию браузера на iOS */
|
||||||
|
appearance: none;
|
||||||
|
-webkit-tap-highlight-color: transparent; /* Убираем подсветку на тап */
|
||||||
|
touch-action: manipulation; /* Улучшение отзывчивости на мобильных устройствах */
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-input:focus {
|
.message-input:focus {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user