Блог

Я создаю веб-приложение с помощью django, react и material-ui. Я сталкиваюсь с той же проблемой с firefox и chrome. На моем локальном хостинге css выглядит нормально. Но когда я загружаю его на веб-сервер, кое-что не так:

1. Метки полей пользовательского интерфейса материалов стираются в процессе производства.
2. элемент h3 больше в производстве
3. Кнопка пользовательского интерфейса материала не имеет полной ширины в производстве

Я читал о прямой настройке уровней масштабирования в браузере, но так как это влияет только на несколько элементов (основные контейнеры на экране в порядке) Я не думаю, что в этом проблема.

Другой вопрос, предложенный для обеспечения того, чтобы мета-теги были одинаковыми, что не совсем так, но они не отличаются таким образом, чтобы мне было очевидно, что это приведет к этому.

Ниже приведены мета-теги как для производства, так и для разработки.

производственная мета (на основе инструментов разработки chrome)

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 

мета разработки (на основе инструментов разработки chrome)

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Web site created using create-react-app">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
<link rel="manifest" href="/manifest.json"> (not in production)
 

Единственная разница, которую я вижу, заключается viewport в том, что в разработке есть minimum-scale=1 . Когда я добавляю это непосредственно в свой рабочий код из инструментов разработки, проблема сохраняется. Ссылка на manifest нее также не находится в производстве, но я предполагаю react build , что это относится к этому файлу.

Любые идеи, я действительно не хочу поддерживать два источника кода на таком гранулированном уровне. Спасибо.

решенный:

В моем приложении django я импортирую bootstrap 5 в html-файл верхнего уровня, в который я встраиваю свои скрипты React/ CSS. Начальная загрузка мешает моему css React, основанному на материале-пользовательском интерфейсе.

Возможно, есть лучшее решение, но я просто поддерживаю 2 base.html файла в своем приложении django, один с загрузкой, которая обрабатывает мои файлы, связанные с django, и один для моего встроенного проекта react.