Что происходит при уменьшении масштаба страницы?

Question

inturizm @inturizm

Что происходит при уменьшении масштаба страницы?

Здравствуйте!
Выложил первую страничку сайта на бесплатный хостинг https://inturizm.000webhostapp.com/.
Все отображается вроде нормально. Но если уменьшать масштаб страницы в браузере до 33 либо до 25%, в верхнем меню пункт переходит на следующую строку. Что можно с этим сделать?

Вопрос задан более трёх лет назад
686 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Ankhena @Ankhena Куратор тега CSS

Вы правда считаете, что кто-то будет смотреть сайт при масштабе 25%?
Если вы пытаетесь таким образом проверять адаптив, но масштаб тут не при чем.
Как проверять адаптивность на скрине ниже:

Написано более трёх лет назад
inturizm @inturizm Автор вопроса

Ankhena, я не считаю, что кто-то будет смотреть таким образом сайт. Но если проверять адаптивность, как вы показали, блок не переходит на следующую строку. Но если запустить сайт с телефона, блок ведет себя так же, как и при уменьшении масштаба.

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS
inturizm,
Вы забыли мета тег meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

А потом нужно писать medai условия и адаптировать сайт.

Потому что в том виде в котором сайт сейчас открывается с телефона он все равно не приспособлен к использованию. Например, попасть даже моим женским пальчиком по нужному пункту меню довольно сложно. Нужно напрягать глаза.

А учитывая, что вероятность поиска ремонта компьютеров именно с телефона велика (компьютер-то не работает), имеет смысл этим заняться.
Проверьте сайты конкурентов.
Написано более трёх лет назад
inturizm @inturizm Автор вопроса

Ankhena, понял, буду дорабатывать

Написано более трёх лет назад

Решения вопроса 1

3 комментария

inturizm @inturizm Автор вопроса

Если добавить viewport, то насколько я понял, на телефоне я буду видеть только то количество пикселей, которое содержит экран телефона. И поэтому придется писать отдельную версию под телефон. Сейчас я не готов этим заниматься. Но хотел бы узнать, если оставить на мобильных устройствах отображение всей страницы, как на компьютере, можно ли как-то сделать, чтобы пункт меню не переходил на следующую строку? Дело в том, что даже при обычном увеличении масштаба видно, что размер пунктов меню в зависимости от содержания увеличивается большими темпами, чем размер самого меню. Видимо, поэтому в какой-то момент содержание меню становится больше его размера, и переходит на следующую строку.

Написано более трёх лет назад
ProjectSoft @ProjectSoft

inturizm,
И поэтому придется писать отдельную версию под телефон.
не мешало бы изменить дизайн и для десктопа под более современный вид, а соответственно и продумать адаптивность под мобильные и не нужно писать отдельную версию/сайт.
Если вы хотите оставить как есть, то вам придется чем-то жертвовать. Вот это и есть ваша "жертва".
PS: Заметьте выделенное в ваших словах и моих.

Написано более трёх лет назад
Minusator @Minusator

inturizm, не придется писать мобильную версию, все делается media запросами

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 8 часов назад
- 64 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 8 часов назад
- 45 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 9 часов назад
- 51 просмотр
1

ответ
Веб-разработка

Простой
Не будет ли проблем при использовании хостинга другой страны?
- 1 подписчик
- 11 часов назад
- 83 просмотра
2

ответа
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 11 часов назад
- 47 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 12 часов назад
- 60 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 14 часов назад
- 52 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 15 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 16 часов назад
- 37 просмотров
1

ответ
Веб-разработка

+1 ещё

Средний
Как сделано всплывающее окно с моим e-mail адресом Google, который я на этом сервере не оставлял?
- 1 подписчик
- вчера
- 130 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Помощь с водпресс

18 апр. 2024, в 21:00

150 руб./за проект

Спарсить ссылки на все товары конкретного продавца в озон

18 апр. 2024, в 20:13

2000 руб./за проект

Вы правда считаете, что кто-то будет смотреть сайт при масштабе 25%?
Если вы пытаетесь таким образом проверять адаптив, но масштаб тут не при чем.
Как проверять адаптивность на скрине ниже:
Ankhena, я не считаю, что кто-то будет смотреть таким образом сайт. Но если проверять адаптивность, как вы показали, блок не переходит на следующую строку. Но если запустить сайт с телефона, блок ведет себя так же, как и при уменьшении масштаба.
inturizm,
Вы забыли мета тег meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">

А потом нужно писать medai условия и адаптировать сайт.

Потому что в том виде в котором сайт сейчас открывается с телефона он все равно не приспособлен к использованию. Например, попасть даже моим женским пальчиком по нужному пункту меню довольно сложно. Нужно напрягать глаза.

А учитывая, что вероятность поиска ремонта компьютеров именно с телефона велика (компьютер-то не работает), имеет смысл этим заняться.
Проверьте сайты конкурентов.

Answer 1 · 2018-11-10 20:59:27

Вы путаете понятие масштаба страницы браузера и понятие адаптивности.
Изучаем https://ru.wikipedia.org/wiki/Адаптивный_веб-дизайн
Далее у вас не включен режим адаптивности сайта из-за этого у вас он выглядит одинаково на всех устройствах. А это не правильно.
Добавить необходимо в html между тегами .

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Далее необходимо приводить в порядок элементы сайта.

Answer 2 · 2018-11-10 23:40:17

Ещё нужно учитывать, что гуглохром не умеет масштабировать до дробных величин пикселя, будет обязательно происходить округление. Особенно это заметно по шрифтам, потому если при масштабе 100% текст влезает в прямоугольник, это ещё не значит, что он будет влезать и при масштабе 33%.

Что происходит при уменьшении масштаба страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт