Jest aplikacja internetowa o ściśle ustalonych wymiarach, załóżmy 600x400 pikseli.
<body>
<div class="app">Zawartość kontenera, wszystkie dzieci mają position absolute</div>
</body>
body {
width: 600px;
height: 400px;
margin: auto;
}
.app {
width: 600px;
height: 400px;
border: 1px solid black;
background-color: gray;
position: relative;
}
.app > * {
position: absolute;
}
Aplikacja powstała w czasach, kiedy każdy przeglądał Internet z komputera, najczęściej IE 6,7,8 i dominowały rozdzielczości 1024x768, 800x600.
Aby jakoś to wyglądało na mobilkach, trzeba rozciągnąć ją na cały ekran. Próbuję do tego wykorzystać viewport:
<meta name="viewport" content="width=600, height=400">
Ale pojawia się kilka problemów:
- nie wszystkie urządzenia / przeglądarki to respektują
- aplikacja nie jest wycentrowana
- ekran może być obrócony
Kolejne podejście:
<meta name="viewport" content="width=600, height=auto">
W Chrome aplikacja jest wycentrowana, ale dalej nie zawsze width=600 jest respektowany.
To może JavaScript?
function setViewport() {
var viewport = document.querySelector('meta[name=viewport]');
var w,h;
if (viewport) {
if (window.innerWidth / window.innerHeight > (3/2)) {
w = 'auto';
h = 400;
} else {
w = 600;
h = 'auto';
}
viewport.setAttribute('content', 'width='+w+', height='+h+', maximum-scale=1.0, initial-scale=1.0');
}
}
Niestety wciąż nie zawsze viewport jest respektowany.
Czy za pomocą <meta name="viewport"> można wymusić, żeby zawsze aplikacja dostosowała się na całą długość lub szerokość ekranu, czy potrzebuję innych sztuczek?