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

Question

Илья Мок @Mok1ner

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

HTML
CSS

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

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

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

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

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

Простой
Почему не работает псевдокласс not?
- 1 подписчик
- вчера
- 82 просмотра
2

ответа
HTML

+3 ещё

Средний
Как включить полноэкранный режим для VKVideo внутри iframe с srcdoc?
- 2 подписчика
- вчера
- 65 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как установить анти-спам капчу на загрузку всего сайта?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Выпадающее меню сворачивается только на главной странице, как исправить?
- 1 подписчик
- вчера
- 43 просмотра
0

ответов
CSS

Простой
Как скруглить углы у кривых углов?
- 1 подписчик
- вчера
- 57 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как организовать прямую трансляцию иностранных ТВ-каналов на своем сайте?
- 1 подписчик
- вчера
- 70 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать чтобы ниспадающее меню не не выходило за пределы контейнера?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
CSS

Средний
Как сделать горизонтальный скролл блока с несколькими колонками?
- 1 подписчик
- 09 янв.
- 75 просмотров
1

ответ
CSS

+1 ещё

Средний
Можно ли накладывать/объединять блоки с наружным изображением?
- 1 подписчик
- 08 янв.
- 130 просмотров
0

ответов
HTML

+1 ещё

Простой
Современный учебник HTML/CSS?
- 1 подписчик
- 07 янв.
- 1729 просмотров
6

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Спарсить сайт, разработать бота для авто-заполнения данных (selenium)

11 янв. 2025, в 18:06

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

Помощь с проектированием архитектуры проекта

11 янв. 2025, в 16:51

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

Ускорить работу сайта на Wordpress

11 янв. 2025, в 15:47

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

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

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

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

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