HTML CSS статические страницы сайта отображаются в разных размерах
Я относительно новичок, создал несколько статических веб-страниц, но не эксперт. Я прошу прощения, если на этот вопрос ответили еще где, я не уверен, что будет вызвана ошибка, с которой я сталкиваюсь, и уже пытался найти ответ и не увенчался успехом. Пожалуйста, укажите мне другой ответ, если ответ на этот вопрос уже существует.
Для проекта я создаю статический веб-сайт для школьного проекта и заметил, что страницы html/css отображаются в разных размерах (почти как если бы был эффект масштабирования). Посмотрев код через инспектор, я заметил, что на странице index.html отображается ширина: 1236px, а остальные страницы отображаются с шириной: 1350px в том же порту просмотра. Не уверен, как решить эту проблему. Ниже приведена ссылка на код на github. Еще раз прошу прощения, если есть лучший способ загрузить код здесь, это мой первый пост на этом форуме.
https://github.com/teoherman/repice-site
Заранее спасибо,
2 ответа
Проблема в пятой строке вашего index.html, а точнее в ее отсутствии на других ваших страницах. Рекомендуется всегда иметь метатег, указывающий информацию о порте просмотра.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Добавьте эту строку в заголовок других ваших страниц. Обратите внимание, что вы можете захотеть сохранить большинство мета-тегов в своем <head> идентичны на разных страницах одного сайта. В частности, эти три:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Когда я начинал, я использовал Bootstrap для большей части моего школьного проекта. Это помогает отображать страницы на экранах разных размеров, и есть много примеров кодов, которые вы можете использовать. Надеюсь, это поможет вам.