Игнорируется мета в HTML. Что делать?

Question

Илья Мок @Mok1ner

Веб Разработчик

HTML
CSS

Игнорируется мета в HTML. Что делать?

Игнорируется мета тег на адаптацию. Перепробовал очень много методов ни один не помог. Решение не нашел. Подозреваю, что где-то конфликт, пробовал отключать уже библиотеки - тоже не помогло, думаю, может в css где-нибудь кроется ответ, вот только где?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вопрос задан 25 окт. 2023
246 просмотров

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

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

Rise @risejs

Ответ кроется в медиа-запросах.

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

Rise, Никакие не применяются , перепробывал все методы , они просто не встают нет не каких изменений, да и еще к тому же когда растягиваю сайт сайт стоит на месте не адаптируется под размер браузера,

Написано 25 окт. 2023
modelair @modelair

Илья Мок, тоесть, судя по тому что ты написал, ты считаешь что как бы вот этого кода хватает, чтобы все было адаптивно? у меня для тебя плохие новости

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

modelair, Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт. Вообще 0 действий не отрабатывает.@modelair,

Написано 25 окт. 2023
Lynn «Кофеман» @Lynn

> Игнорируется мета тег на адаптацию.

Какие ваши доказательства?

Написано 25 окт. 2023
alexalexes @alexalexes

Илья Мок, в вашем проекте еще должен быть написан вашими ручками не менее объемистый кусочек CSS файла с альтернативными стилями для разных размеров экрана, чем уже имеющиеся подключенные стили, чтобы все работало как надо.

Написано 25 окт. 2023
Ankhena @Ankhena Куратор тега CSS

Илья Мок,
Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт.

Что написано в разметке и в стилях говорящее о перестроении?

В чем может быть дело:
- Вообще не тот файл.
- Где-то есть блок с фиксированной шириной, мешающи перестроению всего остального.
- Неверно понимаете размер вьюпорта там, где проверяете.
- Неверно написаны media или другие правила
- Неверный порядок media и стилей без media.
- Невалидный код (разметка или стили)
и т.д.

Чтобы узнать, что там у вас происходит, сделайте пример с минимальным и достаточным кодом на codepen.io
(Если что, meta viewport там уже есть, в разметку писать нужно внутренности body)

Написано 25 окт. 2023
Rise @risejs

Илья Мок,

но его достаточно

Чел, просто написать мета тег недостаточно, это вообще ничего не даст.

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса
Lynn «Кофеман»,
@media (max-width: 1024px) { .container { width: auto; } .List_product { flex-wrap: wrap; } .product { margin-right: 25px; } }

это мои css написал по минимуму и тоже думаю что где то блок что вообще ничего не отрабатывает, видел людей у них сразу все начало отрабатывать после маленького кода.
Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса
Rise, он же должен хоть какую нибудь реакцию дать. Или что то обновилось и уже этого не достатточно вот что еще в цсс прописано чтобы посмотреть
@media (max-width: 1024px) { .container { width: auto; } .List_product { flex-wrap: wrap; } .product { margin-right: 25px; } }
Написано 25 окт. 2023

Илья Мок @Mok1ner Автор вопроса

alexalexes,

@media (max-width: 1024px) {
   	.container {
   		width: auto;
   	}

   	.List_product {
   		flex-wrap: wrap;
   	}

   	.product {
   		margin-right: 25px;
   	}
   }

Написано 25 окт. 2023

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

Илья Мок, этих стилей тоже недостаточно.
Нужно видеть где и как написаны стили для другого размера.
Например, вы написали общие стили после media, а не наоборот.

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

Ankhena, это два моих блока универсальных стилей
Контейнер отвечает за разметку всей страницы.
Продукт отвечает за вложение на странице картинок иконок и т.п. , а тресте тоже универсальный стиль

Написано 25 окт. 2023
Ankhena @Ankhena Куратор тега CSS

Илья Мок, я рада. Перечитайте, пожалуйста, что я написала и что нужно показать, чтобы стало понятно, что вы пишете не так. И сделайте это, если действительно хотите получить ответ на вопрос.

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

Ankhena, спасибо

Написано 25 окт. 2023
Sergey @sergey155

Покажите весь <head>

Написано 25 окт. 2023

Илья Мок @Mok1ner Автор вопроса

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Chic Mok</title>

	<link href="fontawesome/css/all.css" rel="stylesheet">
	<link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="styles/style.css">
</head>

Написано 25 окт. 2023

maksam07 @maksam07

Илья Мок, почему не используете разметку от бутстрапа?
https://getbootstrap.com/docs/5.3/getting-started/...
Это скорее всего не критично, но почему бы не следовать рекомендации?

Написано 25 окт. 2023
Sergey @sergey155

maksam07, Согласен

Я думаю что одна из вероятных причин - это наличие других мета-тегов, которые могут переопределять его. Также возможно, что какие-то другие стили или скрипты в проекте могут переопределять параметры мета-тега viewport.

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

maksam07, пробовал тоже не работает

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

Sergey, тоже думаю что где-то что то не то , а вот где не знаю

Написано 25 окт. 2023
maksam07 @maksam07

Илья Мок, удалите все лишнее в коде, начните со стандартного html кода от бустрапа и проверьте, если все работает, то по кускам возвращайте свой прошлый код, вероятнее проблема кроется в нем. Я буквально вчера тоже так на один свой косяк напоролся по невнимательности. Думал, что у фреймворка какой-то баг, а это я сам его создал и не заметил

Написано 25 окт. 2023
Илья Мок @Mok1ner Автор вопроса

maksam07, Спасибо большое хорошее решение так и сделаю.

Написано 25 окт. 2023
maksam07 @maksam07

Илья Мок, если решение поможет - скажите, опубликую его как решение, чтобы вы смогли отметить

Написано 25 окт. 2023

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Почему не работает свойство backdrop-filter: blur?
- 1 подписчик
- 8 часов назад
- 19 просмотров
0

ответов
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 12 часов назад
- 63 просмотра
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхий угол?
- 2 подписчика
- 17 часов назад
- 191 просмотр
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- вчера
- 170 просмотров
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- вчера
- 302 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 178 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 01 мая
- 112 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 01 мая
- 129 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 97 просмотров
0

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

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

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Изменить авторизацию на сайте yii2

04 мая 2024, в 05:49

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

Парсер

04 мая 2024, в 03:57

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

Создать значок/обложку для видео Ютуб

04 мая 2024, в 01:47

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

Rise, Никакие не применяются , перепробывал все методы , они просто не встают нет не каких изменений, да и еще к тому же когда растягиваю сайт сайт стоит на месте не адаптируется под размер браузера,
Илья Мок, тоесть, судя по тому что ты написал, ты считаешь что как бы вот этого кода хватает, чтобы все было адаптивно? у меня для тебя плохие новости
modelair, Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт. Вообще 0 действий не отрабатывает.@modelair,
> Игнорируется мета тег на адаптацию.

Какие ваши доказательства?
Илья Мок, в вашем проекте еще должен быть написан вашими ручками не менее объемистый кусочек CSS файла с альтернативными стилями для разных размеров экрана, чем уже имеющиеся подключенные стили, чтобы все работало как надо.
Илья Мок,
Этого кода мало но его достаточно чтобы чтобы он хоть что то дал, хоть маленький откликт.

Что написано в разметке и в стилях говорящее о перестроении?

В чем может быть дело:
- Вообще не тот файл.
- Где-то есть блок с фиксированной шириной, мешающи перестроению всего остального.
- Неверно понимаете размер вьюпорта там, где проверяете.
- Неверно написаны media или другие правила
- Неверный порядок media и стилей без media.
- Невалидный код (разметка или стили)
и т.д.

Чтобы узнать, что там у вас происходит, сделайте пример с минимальным и достаточным кодом на codepen.io
(Если что, meta viewport там уже есть, в разметку писать нужно внутренности body)
Илья Мок,

но его достаточно

Чел, просто написать мета тег недостаточно, это вообще ничего не даст.
Lynn «Кофеман»,
@media (max-width: 1024px) { .container { width: auto; } .List_product { flex-wrap: wrap; } .product { margin-right: 25px; } }

это мои css написал по минимуму и тоже думаю что где то блок что вообще ничего не отрабатывает, видел людей у них сразу все начало отрабатывать после маленького кода.
Rise, он же должен хоть какую нибудь реакцию дать. Или что то обновилось и уже этого не достатточно вот что еще в цсс прописано чтобы посмотреть
@media (max-width: 1024px) { .container { width: auto; } .List_product { flex-wrap: wrap; } .product { margin-right: 25px; } }
alexalexes,
@media (max-width: 1024px) { .container { width: auto; } .List_product { flex-wrap: wrap; } .product { margin-right: 25px; } }
Илья Мок, этих стилей тоже недостаточно.
Нужно видеть где и как написаны стили для другого размера.
Например, вы написали общие стили после media, а не наоборот.
Ankhena, это два моих блока универсальных стилей
Контейнер отвечает за разметку всей страницы.
Продукт отвечает за вложение на странице картинок иконок и т.п. , а тресте тоже универсальный стиль
Илья Мок, я рада. Перечитайте, пожалуйста, что я написала и что нужно показать, чтобы стало понятно, что вы пишете не так. И сделайте это, если действительно хотите получить ответ на вопрос.
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chic Mok</title> <link href="fontawesome/css/all.css" rel="stylesheet"> <link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles/style.css"> </head>
Илья Мок, почему не используете разметку от бутстрапа?
https://getbootstrap.com/docs/5.3/getting-started/...
Это скорее всего не критично, но почему бы не следовать рекомендации?
maksam07, Согласен

Я думаю что одна из вероятных причин - это наличие других мета-тегов, которые могут переопределять его. Также возможно, что какие-то другие стили или скрипты в проекте могут переопределять параметры мета-тега viewport.
Sergey, тоже думаю что где-то что то не то , а вот где не знаю
Илья Мок, удалите все лишнее в коде, начните со стандартного html кода от бустрапа и проверьте, если все работает, то по кускам возвращайте свой прошлый код, вероятнее проблема кроется в нем. Я буквально вчера тоже так на один свой косяк напоролся по невнимательности. Думал, что у фреймворка какой-то баг, а это я сам его создал и не заметил
maksam07, Спасибо большое хорошее решение так и сделаю.
Илья Мок, если решение поможет - скажите, опубликую его как решение, чтобы вы смогли отметить

Answer 1 · 2023-10-25 17:13:39

Нашел решение и пришлось немного покопаться проблема блока была в css
я поставил сам блок а тоесть

.conteiner {
width: 1200px; <--- вот он и был блок
margin: 0 auto;
}

переписал его так и все заработало

.conteiner {
   	display: inline-block;
   	padding: 15px 30px 15px 30px;
   	width: 100%;
   }

Спасибо большое всем за советы, очень полезно было!

Игнорируется мета в HTML. Что делать?

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

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

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