Адаптация странички html под мобильные устройства?
Здравствуйте. Вот этот сайт veltem5q.beget.tech
Все хорошо, очень красиво
Но открыв с МОБИЛЬНОГО оно не идет В ТАКЖЕ.
К примеру? СЛЕВА белого цвета БЛОК main НА wap версии(В ТЕЛЕФОНЕ) выходит вообще как УЗКАЯ ПОЛОСА просто.
Хотя посмотреть ВЕБ-version оно занимает пространство ВНУШИТЕЛЬНОЕ.
Как я понимаю МАСШТАБ сайта слишком большой, это как полотно, которого слишком МНО.
Я обращаюсь к нашим знатокам: как можно УРЕЗАТЬ масштаб сайт до размера ВИДИМОГО чтобы лишнего не осталось ЗА КРАЯМИ тогда на мобилке будет также отображаться, думаю
Но сразу скажу что view port не справляется со своим device-to-device
Дополнительно:
не видел что бы на мобильной версии был сразу и сайдбар и контент, нигде такое не практикуют, потому что оно туда тупо не влезет
так что, то что ты говоришь что оно якобы не влезает - это нормально
а то что оно сжимается, якобы там белая полоска - ну поставь ширину сайдбару и не будет сжиматься, будет сжиматься правый блок
тоже мне, проблема, это не проблема
P.S и viewport не трогай вообще, ты на телефона хоть стой хоть прыгай, там не будет выглядеть так же как на десктопе, а если и будет - то шрифт будет на столько мал и не читабелен - а это уже новая "проблема".
Ты влетаешь в сайт, зачем тебе каждый раз делать 2 действия: т.е. ПИКАТЬ на саидбар, а потом еще и В.
Когда можно сразу ПИКНУТЬ в.
Ответы:
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... или что-то подобное про медиа-запросы и вообще адаптивную вёрстку
ну и meta viewport скорее всего должен быть:
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
<meta name="viewport" content="width=device-width, initial-scale=1" />
- нет, все это ерунда. ведь я создаю инновационный сайт, который не надо прокручивать вниз на телефоне, какие делают все дурачки.
зашел на сайт, всё, видимая область и есть весь размер. если нужно дальше то вжимаешь переход и идешь на страницу следующую. это нужно уметь. - VelTemLo, раз вы такой умный новатор, зачем вам ответы от всяких дурачков?
- archelon, все кто в помощи к мне, это не могут быть дурачки! они в святости также как он.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для адаптации веб-страницы под мобильные устройства, вам необходимо использовать подход Responsive Web Design (RWD), который позволяет создавать сайты, которые оптимально отображаются на различных устройствах, включая смартфоны и планшеты.
Существует несколько способов реализации адаптивного дизайна для вашего сайта. Один из них - использование медиа-запросов в CSS. Медиа-запросы позволяют задавать стили, которые будут применяться в зависимости от различных характеристик устройства, таких как ширина экрана.
Пример использования медиа-запросов в CSS для адаптации страницы под мобильные устройства:
/* Стили для мобильных устройств с шириной экрана до 768px */ @media only screen and (max-width: 768px) { /* Ваши стили для мобильных устройств */ } /* Стили для планшетов с шириной экрана от 769px до 1024px */ @media only screen and (min-width: 769px) and (max-width: 1024px) { /* Ваши стили для планшетов */ } /* Стили для десктопов с шириной экрана от 1025px и выше */ @media only screen and (min-width: 1025px) { /* Ваши стили для десктопов */ }
Кроме того, важно использовать относительные единицы измерения, такие как проценты или em, вместо абсолютных значений, чтобы контент мог адаптироваться к разным размерам экранов.
Также не забывайте о мобильной версии сайта, которая может включать в себя упрощенный дизайн, минимизированные изображения и другие оптимизации для улучшения производительности на мобильных устройствах.
Надеюсь, эти советы помогут вам успешно адаптировать вашу веб-страницу под мобильные устройства.