diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue index 8ef9ea2..edf1f91 100644 --- a/src/views/ChatView.vue +++ b/src/views/ChatView.vue @@ -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 () => { isTouchDevice.value = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0); + + // Добавляем обработчики для поля ввода, чтобы предотвращать зум + if (messageInputRef.value) { + messageInputRef.value.addEventListener('focus', preventZoomOnInput); + messageInputRef.value.addEventListener('blur', restoreZoomBehavior); + } + if (!isAuthenticated.value) { return; } @@ -652,6 +680,12 @@ onMounted(async () => { }); onUnmounted(() => { + // Удаляем обработчики для поля ввода + if (messageInputRef.value) { + messageInputRef.value.removeEventListener('focus', preventZoomOnInput); + messageInputRef.value.removeEventListener('blur', restoreZoomBehavior); + } + if (socket) { socket.off('getMessage', handleNewMessage); socket.off('messagesRead', handleMessagesReadByOther); @@ -1138,8 +1172,12 @@ const handleClickOutsideContextMenu = (event) => { padding: 0.7rem 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 24px; - font-size: 0.95rem; + font-size: 16px; /* Устанавливаем оптимальный размер шрифта для мобильных устройств */ background: white; + -webkit-appearance: none; /* Предотвращаем стилизацию браузера на iOS */ + appearance: none; + -webkit-tap-highlight-color: transparent; /* Убираем подсветку на тап */ + touch-action: manipulation; /* Улучшение отзывчивости на мобильных устройствах */ } .message-input:focus {