<head>
<title>Тест</title>
<link rel="stylesheet" type="text/css" href="steal_viz-2.css"></link>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta http-equiv="Cache-control" content="public">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flex1"><img src="ludi.svg" style="width:100%;height:100%;"></img></div>
<div class="flex1"><img src="ludi.svg" style="width:100%;height:100%;"></img></div>
<div class="flex1"><img src="ludi.svg" style="width:100%;height:100%;"></img></div>
<div class="flex1"><img src="ludi.svg" style="width:100%;height:100%;"></img></div>
</body>
body{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width:99%;
height:98%;
background-color:black;
}
div.flex1{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
color:black;
width:100%;
height:42%;
min-width:240px;
}
@media screen and (min-aspect-ratio:2/3){
div.flex1{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
color:black;
width:25%;
height:42%;
min-width:240px;
}
}
- когда я запускаю это на сервере(перехожу по ссылки) всё работает слегка криво(на некоторых разрешениях экрана нормально на некоторых нет
- когда я запускаю это локально(напрямую html) с телефонов(включая те что не работают с сервера/ПК всё работает как задумано
Почему характерно такое поведение?
Простой
Средний
