Итак, я работаю над своим сайтом и пытаюсь заставить его правильно изменить размер. Текст оказался трудным, поэтому мне пришлось сделать пару медиа-запросов, чтобы заставить его работать на экране любого размера. Он прекрасно работает на Android, на моем ноутбуке и на тех сайтах, где вы можете увидеть различные размеры экрана. Однако на iPhone? Он не работает должным образом (но, похоже, он не игнорирует его полностью, он просто не позволяет заставить медиа-запросы работать должным образом?) У меня есть тег viewport, так что это не проблема. Я не делал свои запросы точными размерами экрана, но больше старался, чтобы текст выглядел нормально, когда я думал, что он начал выглядеть странно (что в ретроспективе, вероятно, не лучший план, но эй, я все еще учусь кодировать).
Так что мне интересно, где это пойдет не так? (www.ellistolsma.nl - сайт).
Уже пробовал тег viewport, менял позиции мета-тегов, менял max-width на max-device-width, менял размеры экрана, пробовал разные браузеры.
Это мои запросы:
@media (min-width: 536px) and (max-width: 900px) { some irrelevant code I think }
@media (min-width: 370px) and (max-width: 536px) { }
@media (min-width: 250px) and (max-width: 370px) { }
@media (min-width: 0px) and (max-width: 250px) { }
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<link href="index.css" rel="stylesheet" type="text/css">
<title>Ellis Tolsma</title>
</head>