Я использую приведенный ниже код для отображения графики с SVG.Все работы в порядке после загрузки страницы в книжной или альбомной ориентации.Но когда меняется ориентация, окно просмотра отображается неправильно.Например, если загрузить страницу в портретном режиме и изменить ориентацию на альбомную, она обрежет несколько кругов и увеличит масштаб окна просмотра.Что я делаю не так?
viewPort.setAttribute("width", screen.width);
viewPort.setAttribute("height", screen.height);
viewPort.setAttribute("viewBox","0 0 "+(screen.width)+" "+(screen.height));
document.getElementById("header").style.width = screen.width;
document.getElementById("div1").style.width = window.innerWidth;
document.getElementById("div1").style.height = window.innerHeight;
document.getElementById("div1").style.minWidth = window.innerWidth;
document.getElementById("div1").style.maxWidth = window.innerWidth;
document.getElementById("div1").style.minHeight = window.innerHeight;
document.getElementById("div1").style.maxHeight = window.innerHeight;
document.getElementById("div2").style.width = screen.width;
document.getElementById("div2").style.height = screen.height;
document.getElementById("div2").style.minWidth = screen.width;
document.getElementById("div2").style.maxWidth = screen.width;
document.getElementById("div2").style.minHeight = screen.height;
document.getElementById("div2").style.maxHeight = screen.height;
function drawCircle(x) {
var c = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
c.setAttribute('cx', x);
c.setAttribute('cy', 50);
c.setAttribute('r', 20);
circle.appendChild(c);
}
var x = 50;
for (var i = 0; i < 10; i++) {
drawCircle(x);
x = x + 50;
}
body {
margin: 0;
overflow: hidden;
}
#header {
width: 100%;
height: 150px;
background-color: blue;
}
#div1 {
position: relative;
overflow: auto;
background-color: red;
width: 100%;
height: 0;
left: 0; right: 0;
top: 0; bottom: 0;
min-width: 0;
min-height: 0;
max-width: 0;
max-height: 0;
}
#div2 {
position: relative;
overflow: hidden;
background-color: #ffffff;
width: 100%;
height: 0;
left: 0; right: 0;
top: 0; bottom: 0;
min-width: 0;
min-height: 0;
max-width: 0;
max-height: 0;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="header">
<div id="div1">
<div id="div2">
<svg id="viewPort" width="100%" height="100%" viewBox="0 0 0 0" preserveAspectRatio="none">
<svg id="circle"></svg>
</svg>
</div>
</div>
</body>
</html>