1
브라우저 창에서 감지하지 변화 :@media (방향 : 세로) 다음과 같이 내가 코드를 작성했습니다
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
</head>
<body>
</body>
</html>
은 "test.css"파일도 마찬가지로 읽
body {
background-image: url("home-bg-slow-alt.gif");
background-repeat: no-repeat;
}
@media (orientation: landscape) {
body {
background-size: 100vw auto;
}
}
@media (orientation: portrait) {
body {
background-size: auto 100vh;
}
}
그러나 때마다 html 파일을 보았습니다. 세로 방향 쿼리는 어떤 브라우저를 사용하든 바탕 화면에 영향을 미치지 않습니다.
"background-size : cover"는 이미지의 종횡비를 유지하고 페이지 전체를 지속적으로 덮고있는 것으로 알고 있지만 어떤 이유로이 방법은 특정 모바일 브라우저에서 이상하게 표시됩니다.
높이와 비교하여 뷰포트 너비를 기반으로 미디어 쿼리를 실행하는 방법이 있습니까? 나는 오리엔테이션 방법이 문자 그대로 뷰포트의 실제 크기가 아닌 내 화면의 크기를 감지한다고 생각합니다.