Я недавно начал изучать HTML и CSS. В частности, я изучаю адаптивный веб-дизайн. Я изучал этот мета-тег viewport - один из первых шагов в создании адаптивного веб-дизайна. В частности, я учусь по этой ссылке:
https://www.w3schools.com/css/css_rwd_viewport.asp
Здесь они предоставили два изображения веб-сайта на мобильных экранах с тегом видового экрана и без него. В первом без экрана изображение не настраивается вместе с экраном. Но на последнем изображении изображение подстраивается. Теперь я понял это. Я подумал о том, чтобы повторить это, используя следующее:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="jeff.jpg">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sof</p>
</body>
</html>
Это не приводит к изменению изображения при изменении ширины. Итак, что здесь происходит?
Я знаю, я могу решить эту проблему, поместив блок ширины CSS: 100%, но я хочу понять, почему область просмотра не работает так, как это было упомянуто на веб-сайте. Или я что-то упустил?