HTML-макет на мобильных устройствах не работает должным образом

ProgramBox

HTML-макет на мобильных устройствах не работает должным образом

Post author:admin
Запись опубликована:29 октября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

Мне нужно знать, как исправить этот макет на моей странице 404 моего веб-сайта. Он отлично работает на рабочем столе, но макет фактической страницы (а не заголовка) искажается на мобильных устройствах. Код приведен ниже.

ССЫЛКА НА САЙТ ТАКОВА WWW.ROGERSARTWORK.CO.UK/404

HTML-КОД

 <html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("nav.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
</body>
</html>
<div id="content">
<html>
    <title>404 Not Found</title>
   <img src="/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
   <p></p>
   <img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249"/>
    <p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
</html>
</div>
</div>

CSS

 <style>
#content {
    padding-top: 40px;
}

h1 {
    font-size: 45pt;
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
}
#content {
    padding-top: 50px;
}
p {
    font-size: 25pt;
    font-family: Verdana;
    text-align: center;
}

body {
    text-align: center;
    background: #eeeeee;
}

html {
    background: #eeeeee;
}
</style>

И ССЫЛКА НА САЙТ ЕСТЬ WWW.ROGERSARTWORK.CO.UK/404

ИЗОБРАЖЕНИЕ ДЛЯ @sbgib

1. У вас не может быть нескольких тегов <html> в одном документе, а также у вас не может быть никаких тегов после закрывающего тега </html>.

2. Это зависит от 404.png. Вы должны сделать его отзывчивым. В любом случае, ваш HTML-код неверен.

3. @Daweed Есть только один набор тегов <html>?

4. @AbsoluteBeginner «Вы должны сделать его отзывчивым» — это большая неопределенность. Если вы знаете, как его отсортировать, пожалуйста, не могли бы вы отправить ответ с пошаговыми инструкциями. Спасибо

5. Да, безусловно, проверьте исходный код любого веб-сайта. @ekv_56

Ответ №1:

Похоже, единственная проблема — это масштабирование изображений. Это можно исправить, добавив правила CSS, чтобы сделать их полноразмерными для мобильных устройств, а затем добавив один или несколько медиазапросов, чтобы установить для изображений их полные размеры при определенных размерах экрана. Например:

 #content {
  padding-top: 40px;
}

h1 {
  font-size: 45pt;
  font-family: Verdana;
  font-weight: bold;
  text-align: center;
}

#content {
  padding-top: 50px;
}

p {
  font-size: 25pt;
  font-family: Verdana;
  text-align: center;
}

body {
  text-align: center;
  background: #eeeeee;
}

html {
  background: #eeeeee;
}

#content>title img,
.image1 {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 500px) {
  #content>title img {
    width: auto;
    max-width: 100%;
  }
  
  .image1 {
    width: auto;
    max-width: 100%;
  }
}

 <html>

<head>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
  </script>
  <script>
    $(function() {
      $("#header").load("nav.html");
    });
  </script>
</head>

<body>
  <div id="header"></div>
</body>
<div id="content">
  <title>404 Not Found</title>
  <img src="https://www.rogersartwork.co.uk/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
  <p></p>
  <img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249" />
  <p>The page you were looking for does not exist. Please return to our homepage.</p>
  <script type="text/javascript">
    document.addEventListener('contextmenu', event => event.preventDefault());
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</div>
</div>

</html>

Развернуть фрагмент

1. Большое спасибо, попробую это позже

2. Пожалуйста, я надеюсь, что это сработает для вас. Оформление выглядит потрясающе, кстати 🙂

3. Большое спасибо, на самом деле это работа моего дедушки. Я передам ваши комментарии, ему всегда нравится слышать о благодарности за его работу. Спасибо. Я просто вхожу в систему, чтобы попробовать это сейчас. Спасибо @sbgib

4. Если вы измените значение src изображения на первом изображении на rogersartwork.co.uk/images/logo.png вместо просто /images/logo.png тогда первое изображение (логотип) будет ОГРОМНЫМ! Есть какой-нибудь способ уменьшить это?

5. sbgib Спасибо, но все, что вы изменили в коде, все равно не сработало. Я отредактировал свой вопрос, чтобы включить в него картинку для вас. Извините

Ответ №2:

Удалите атрибуты width и height из ваших тегов изображений. Вместо этого вам следует стилизовать их с помощью css. Например, вы можете добавить к ним и идентификатор и настроить таргетинг с помощью css, или вы также можете создать встроенный стиль, например:

Использование встроенного стиля:

 <img src="/images/logo.png" alt="Roger's Artwork Logo" style="max-width: 20rem" />

1. как правило, вам следует избегать использования фиксированной ширины и высоты для изображений, если вы хотите, чтобы они были отзывчивыми. Вместо этого вы можете использовать единицы rem или em или даже проценты.

2. Привет @oxytosinsgrace Спасибо за ваш ответ. Я не знаком с ems и rems, не могли бы вы объяснить подробнее? Спасибо

3. блоки em основаны на родительском размере шрифта элемента, в то время как блоки rem основаны на корневом элементе или размере шрифта html. Использование единиц rem и em не гарантирует, что изображения будут хорошо выглядеть при любом размере экрана, и вам лучше использовать проценты. Дело в том, что единицы rem масштабируются при изменении размера шрифта корневого документа. Размер шрифта по умолчанию составляет 16 пикселей, и поэтому по умолчанию 1 rem = 16 пикселей.