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

Question

Илья Мок @Mok1ner

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

HTML
CSS

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

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

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

Вопрос задан более года назад
265 просмотров

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

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

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

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

Написано более года назад
modelair @modelair

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

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

Написано более года назад
Lynn «Кофеман» @Lynn

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

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

Написано более года назад
alexalexes @alexalexes

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

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

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

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

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

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

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

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

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

alexalexes,

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

   	.List_product {
   		flex-wrap: wrap;
   	}

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

Написано более года назад

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

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

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

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

Ankhena, спасибо

Написано более года назад
Sergey @sergey155

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

Написано более года назад

Илья Мок @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>

Написано более года назад

maksam07 @maksam07

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

Написано более года назад
Sergey @sergey155

maksam07, Согласен

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

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

Написано более года назад
maksam07 @maksam07

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

Написано более года назад
Илья Мок @Mok1ner Автор вопроса

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

Написано более года назад
maksam07 @maksam07

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

Написано более года назад

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

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

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

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

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

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

CSS

+1 ещё

Простой
Как сделать так, чтобы карточка была по размеру контента, если его немного?
- 1 подписчик
- 13 часов назад
- 65 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли на сегодня какое-нибудь решение выделить инпут по focus-visible?
- 1 подписчик
- 19 часов назад
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, что бы используя live server у меня не браузер открывался, а справа от самого кода открывалось окно со всем этим?
- 1 подписчик
- вчера
- 83 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как получить такой эффект на мобильном?
- 1 подписчик
- вчера
- 160 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сверстать данную часть header?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать что бы в меню были вертикальные полосы на всю высоту?
- 2 подписчика
- 11 мар.
- 184 просмотра
2

ответа
HTML

+1 ещё

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

ответа
JavaScript

+1 ещё

Простой
Как скрыть/показать элемент с определенным текстом?
- 2 подписчика
- 10 мар.
- 871 просмотр
2

ответа
CSS

Средний
Как победить проблемы с overflow-y: sсroll?
- 1 подписчик
- 06 мар.
- 141 просмотр
2

ответа
JavaScript

+1 ещё

Средний
Сканирование QR в поле input. Как реализовать блокировку нажатия клавиш клавиатуры?
- 1 подписчик
- 06 мар.
- 140 просмотров
2

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

Специалист технической поддержки ИТ продукта

inSales

от 60 000 ₽

Парсер для сайта

Rotormine

от 10 000 до 100 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 120 000 ₽

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. Что делать?

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

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

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