Hi Leute,
ich habe ein Problem mit der Ermittlung meiner mobilen Browsergröße.
Ich möchte das eine Slideshow immer auf 100% Breite angezeigt wird. Ich ermittle also die Browsergröße und aktualisiere den Slider mit entsprechenden Werten. Das ganze klappt auch soweit aufm iPhone ... auf meinem Samsung Galaxy S2 (mobile Firefox) habe ich allerdings probleme.
Hier 2 Demo-Links:
Demo Seite mit Slider
Demo Seite mit leerem body
Beim Laden der Seite bzw. beim Ändern der "orientation" (drehen des mobilen Gerätes) wird eine Funktion ausgeführt, die mir die "neue" Auflösung ausgeben. Im iPhone ist das Ergebniss wie erwartet ... auf meinem Samsung Galxy S2 passiert folgendes (Ergebniss auf beiden DEMO-Seiten das gleiche):
Start in Hochformat -> alert: 320 x 508 (Breite x Höhe) (richtig)
Anschließend 90° Drehung; Querformat : alert : 533 x 300 (Breite x Höhe) (richtig)
Anschließend 90° zurück; Hochformat : alert : 320 x 847 (Breite x Höhe) (falsch)
Start in Querformat -> alert: 533 x 300 (Breite x Höhe) (richtig)
Anschließend 90° Drehung; Hochformat: alert : 320 x 847 (Breite x Höhe) (falsch)
Anschließend 90° zurück; Querformat: alert : 533 x 300 (Breite x Höhe) (richtig)
Es wird IMMER die Höhe falsch berechnet und ich kann nicht nachvollziehen warum. Hier meine JS-Funktion + Aufruf
ich habe ein Problem mit der Ermittlung meiner mobilen Browsergröße.
Ich möchte das eine Slideshow immer auf 100% Breite angezeigt wird. Ich ermittle also die Browsergröße und aktualisiere den Slider mit entsprechenden Werten. Das ganze klappt auch soweit aufm iPhone ... auf meinem Samsung Galaxy S2 (mobile Firefox) habe ich allerdings probleme.
Hier 2 Demo-Links:
Demo Seite mit Slider
Demo Seite mit leerem body
Beim Laden der Seite bzw. beim Ändern der "orientation" (drehen des mobilen Gerätes) wird eine Funktion ausgeführt, die mir die "neue" Auflösung ausgeben. Im iPhone ist das Ergebniss wie erwartet ... auf meinem Samsung Galxy S2 passiert folgendes (Ergebniss auf beiden DEMO-Seiten das gleiche):
Start in Hochformat -> alert: 320 x 508 (Breite x Höhe) (richtig)
Anschließend 90° Drehung; Querformat : alert : 533 x 300 (Breite x Höhe) (richtig)
Anschließend 90° zurück; Hochformat : alert : 320 x 847 (Breite x Höhe) (falsch)
Start in Querformat -> alert: 533 x 300 (Breite x Höhe) (richtig)
Anschließend 90° Drehung; Hochformat: alert : 320 x 847 (Breite x Höhe) (falsch)
Anschließend 90° zurück; Querformat: alert : 533 x 300 (Breite x Höhe) (richtig)
Es wird IMMER die Höhe falsch berechnet und ich kann nicht nachvollziehen warum. Hier meine JS-Funktion + Aufruf
HTML:
<script type="text/javascript">
function getWindowDimension() {
var height;
var width;
var dimension = new Array();
if (window.innerHeight) {
height = window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
height = document.body.offsetHeight;
} else {
height = 0;
}
if (window.innerWidth) {
width = window.innerWidth;
} else if (document.body && document.body.offsetWidth) {
width = document.body.offsetWidth;
} else {
width = 0;
}
dimension[0] = width;
dimension[1] = height;
return dimension;
}
function refreshSlider() {
windowDimension = getWindowDimension();
totalWidth = windowDimension[0];
totalHeight = windowDimension[1];
alert(totalWidth+" x "+totalHeight);
var bilderDim = getNewImageDimension(imageWidth,imageHeight,totalWidth,totalHeight);
$('.royalImage').attr('width',bilderDim[0]);
$('.royalImage').attr('height',bilderDim[1]);
$('#mySlider').css('height',totalHeight+'px');
}
$(document).ready(function() {
refreshSlider();
});
</script>
<body id="myBody" onresize="refreshSlider();">