Skip to content

Commit 0b6b59f

Browse files
FedoseevSMFedoseevSM
committed
feat: mobile viewport
1 parent c486fcc commit 0b6b59f

8 files changed

Lines changed: 199 additions & 12 deletions

File tree

‎MOBILE_ADAPTATION.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Мобильная адаптация
2+
3+
Проект оптимизирован для мобильных устройств с предотвращением нежелательного зума при вводе текста в поля форм.
4+
5+
## Реализованные улучшения
6+
7+
### 1. Viewport Meta Tag
8+
9+
Обновлен viewport meta tag в `index.html` с дополнительными параметрами:
10+
11+
```html
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
13+
```
14+
15+
**Параметры:**
16+
- `maximum-scale=1.0` - предотвращает зум выше 100%
17+
- `user-scalable=no` - отключает ручной зум пользователя
18+
- `viewport-fit=cover` - для устройств с вырезами (notch)
19+
20+
### 2. CSS Оптимизации
21+
22+
Добавлены специальные CSS правила в `src/index.css`:
23+
24+
#### Предотвращение зума на фокус
25+
```css
26+
@media screen and (max-width: 768px) {
27+
input:focus, textarea:focus, select:focus {
28+
font-size: 16px;
29+
transform: none;
30+
-webkit-text-size-adjust: 100%;
31+
}
32+
}
33+
```
34+
35+
#### iOS Safari фиксы
36+
```css
37+
@supports (-webkit-touch-callout: none) {
38+
input, textarea, select {
39+
font-size: 16px !important;
40+
}
41+
}
42+
```
43+
44+
#### Улучшенные touch targets
45+
```css
46+
button, input, textarea, select {
47+
min-height: 44px;
48+
min-width: 44px;
49+
}
50+
```
51+
52+
### 3. Мобильные CSS классы
53+
54+
Добавлены специальные классы для форм:
55+
56+
- `.mobile-form` - адаптивные отступы для форм
57+
- `.mobile-input` - оптимизированные input поля
58+
- `.mobile-textarea` - оптимизированные textarea поля
59+
60+
### 4. Компоненты с мобильной адаптацией
61+
62+
Обновлены все компоненты с формами:
63+
64+
- ✅ **AuthPage.tsx** - форма авторизации
65+
- ✅ **HomePage.tsx** - форма создания форума
66+
- ✅ **ForumPage.tsx** - форма создания топика
67+
- ✅ **TopicPage.tsx** - форма ответа на пост
68+
69+
## Технические детали
70+
71+
### Почему font-size: 16px?
72+
73+
iOS Safari автоматически зумит при фокусе на input полях с font-size < 16px. Установка font-size: 16px предотвращает этот зум.
74+
75+
### Touch targets
76+
77+
Минимальный размер touch targets (44px) соответствует рекомендациям Apple и Google для доступности.
78+
79+
### Viewport-fit=cover
80+
81+
Параметр `viewport-fit=cover` обеспечивает правильное отображение на устройствах с вырезами (iPhone X и новее).
82+
83+
## Тестирование
84+
85+
Рекомендуется протестировать на:
86+
87+
- 📱 iOS Safari (iPhone)
88+
- 📱 Android Chrome
89+
- 📱 Samsung Internet
90+
- 💻 Desktop browsers
91+
92+
## Дополнительные улучшения
93+
94+
При необходимости можно добавить:
95+
96+
- PWA манифест для лучшего мобильного опыта
97+
- Service Worker для оффлайн работы
98+
- Touch gestures для навигации
99+
- Swipe actions для мобильных устройств
100+
101+
## Совместимость
102+
103+
Решение совместимо с:
104+
- ✅ iOS Safari 12+
105+
- ✅ Android Chrome 70+
106+
- ✅ Все современные мобильные браузеры
107+
- ✅ Desktop browsers (без изменений поведения)

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,22 @@
2020
Транслитерация: "kak-ispolzovat-freymuork"
2121
```
2222

23+
### Мобильная адаптация
24+
25+
Приложение оптимизировано для мобильных устройств:
26+
27+
- ✅ Предотвращение нежелательного зума при вводе текста
28+
- ✅ Оптимизированные touch targets (минимум 44px)
29+
- ✅ Адаптивные формы для мобильных экранов
30+
- ✅ Поддержка устройств с вырезами (notch)
31+
- ✅ Совместимость с iOS Safari и Android Chrome
32+
33+
**Технические решения:**
34+
- Viewport meta tag с `maximum-scale=1.0` и `user-scalable=no`
35+
- CSS правила для предотвращения зума на фокус
36+
- Font-size 16px для input полей (iOS Safari requirement)
37+
38+
Подробное описание: см. [MOBILE_ADAPTATION.md](./MOBILE_ADAPTATION.md)
39+
```
40+
2341
Подробное описание: см. [TRANSLITERATION.md](./TRANSLITERATION.md)

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
77
<title>GitHub Forum Platform</title>
88
<script type="text/javascript">
99
// Single Page Apps for GitHub Pages

‎src/index.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,65 @@
66
@import 'tailwindcss/utilities';
77

88
/* END TAILWIND IMPORTS — ALL OTHER CSS MUST GO BELOW THIS LINE */
9+
10+
/* Mobile viewport and input focus fixes */
11+
@supports (-webkit-touch-callout: none) {
12+
/* iOS Safari specific fixes */
13+
input, textarea, select {
14+
font-size: 16px !important;
15+
}
16+
}
17+
18+
/* Prevent zoom on input focus for mobile devices */
19+
@media screen and (max-width: 768px) {
20+
input:focus,
21+
textarea:focus,
22+
select:focus {
23+
font-size: 16px;
24+
transform: none;
25+
-webkit-transform: none;
26+
-webkit-text-size-adjust: 100%;
27+
}
28+
29+
/* Ensure proper touch targets */
30+
button, input, textarea, select {
31+
min-height: 44px;
32+
min-width: 44px;
33+
}
34+
35+
/* Improve form usability on mobile */
36+
.mobile-form {
37+
padding: 1rem;
38+
}
39+
40+
.mobile-input {
41+
font-size: 16px;
42+
padding: 0.75rem;
43+
border-radius: 0.375rem;
44+
}
45+
46+
.mobile-textarea {
47+
font-size: 16px;
48+
padding: 0.75rem;
49+
border-radius: 0.375rem;
50+
min-height: 120px;
51+
resize: vertical;
52+
}
53+
}
54+
55+
/* Global mobile optimizations */
56+
* {
57+
-webkit-text-size-adjust: 100%;
58+
-webkit-tap-highlight-color: transparent;
59+
}
60+
61+
/* Ensure proper viewport handling */
62+
html {
63+
height: 100%;
64+
overflow-x: hidden;
65+
}
66+
67+
body {
68+
height: 100%;
69+
-webkit-overflow-scrolling: touch;
70+
}

‎src/pages/AuthPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function AuthPage() {
6060
</div>
6161

6262
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
63-
<div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
63+
<div className="bg-white dark:bg-gray-800 py-8 mobile-form shadow sm:rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
6464
<form className="space-y-6" onSubmit={handleSubmit}>
6565
<div>
6666
<label
@@ -77,7 +77,7 @@ export function AuthPage() {
7777
required
7878
value={username}
7979
onChange={(e) => setUsername(e.target.value)}
80-
className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
80+
className="appearance-none block w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
8181
placeholder={t('enterUsername')}
8282
disabled={isSubmitting} />
8383

‎src/pages/ForumPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export function ForumPage() {
147147

148148
{showCreateModal &&
149149
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
150-
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full p-6 shadow-xl">
150+
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mobile-form shadow-xl">
151151
<h2 className="text-xl font-bold mb-4">{t('createTopic')}</h2>
152152
<form onSubmit={handleCreateTopic} className="space-y-4">
153153
<div>
@@ -159,7 +159,7 @@ export function ForumPage() {
159159
required
160160
value={newTopicTitle}
161161
onChange={(e) => setNewTopicTitle(e.target.value)}
162-
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
162+
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
163163

164164
</div>
165165
<div>
@@ -170,7 +170,7 @@ export function ForumPage() {
170170
required
171171
value={newTopicBody}
172172
onChange={(e) => setNewTopicBody(e.target.value)}
173-
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 h-48 resize-none font-mono text-sm"
173+
className="w-full mobile-textarea border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 resize-none font-mono text-sm"
174174
placeholder="Markdown supported..." />
175175

176176
</div>

‎src/pages/HomePage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export function HomePage() {
116116

117117
{showCreateModal &&
118118
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
119-
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full p-6 shadow-xl">
119+
<div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mobile-form shadow-xl">
120120
<h2 className="text-xl font-bold mb-4">{t('createBoard')}</h2>
121121
<form onSubmit={handleCreateForum} className="space-y-4">
122122
<div>
@@ -128,7 +128,7 @@ export function HomePage() {
128128
required
129129
value={newForumTitle}
130130
onChange={(e) => setNewForumTitle(e.target.value)}
131-
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
131+
className="w-full mobile-input border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700" />
132132

133133
</div>
134134
<div>
@@ -139,7 +139,7 @@ export function HomePage() {
139139
required
140140
value={newForumDesc}
141141
onChange={(e) => setNewForumDesc(e.target.value)}
142-
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 h-24 resize-none" />
142+
className="w-full mobile-textarea border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 resize-none" />
143143

144144
</div>
145145
<div className="flex justify-end gap-3 mt-6">

‎src/pages/TopicPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,21 +134,21 @@ export function TopicPage() {
134134

135135
{/* Reply Form */}
136136
{user ?
137-
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 mt-8">
137+
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mobile-form mt-8">
138138
<h3 className="text-lg font-medium mb-4">{t('postReply')}</h3>
139139
<form onSubmit={handleReply}>
140140
<textarea
141141
required
142142
value={replyBody}
143143
onChange={(e) => setReplyBody(e.target.value)}
144-
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 h-32 resize-none font-mono text-sm mb-4"
144+
className="w-full mobile-textarea border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 resize-none font-mono text-sm mb-4"
145145
placeholder="Write your reply..." />
146146

147147
<div className="flex justify-end">
148148
<button
149149
type="submit"
150150
disabled={isReplying || !replyBody.trim()}
151-
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50">
151+
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center gap-2 disabled:opacity-50 min-h-[44px]">
152152

153153
{isReplying ?
154154
<Loader2 className="w-4 h-4 animate-spin" /> :

0 commit comments

Comments
 (0)