Desktop/mobiele versie op mobiel
Dus moet ik handmatig de desktop versie opvragen op mijn toestel.
Nu vraag ik me af waarom er automatisch naar de mobiele versie gegaan wordt op mijn toestel.
Ik heb niet eens een mobiele versie gemaakt. (Mijn site is met bootstrap gemaakt en mbv mediaqueries werkt hij op elke toestelgrootte).
Waarom zit er blijkbaar een verschil in de mobiele en desktop versie?
En hoe zorg ik ervoor dat de mobiele versie verdwijnt of er automatisch genavigeerd wordt naar de desktopversie?
Als er meer informatie nodig is voor deze vraag hoor ik het graag.
Dit is mijn head (exclusief titel en stylesheets):
Code (php)
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Gewijzigd op 26/04/2015 18:36:03 door Fabian W
Je hebt dus maar 1 versie van je website, die gewoon 2 uiterlijken (of meer) kan hebben. Net een kameleon.
Specifiek gaat het om een linkicoontje dat in de mobiele versie weigert de sidebar the openen.
Gewijzigd op 28/04/2015 21:56:29 door Fabian W
Het openen/togglen van de slidebars werkt gewoon niet op de mobiel (tenzij in desktopversie).
Waar kan de fout zitten?
Code (php)
1
2
3
4
5
2
3
4
5
// Toggle left Slidebar
$('.sb-toggle-left1').on('touchend click', function(event) {
eventHandler(event, $(this)); // Handle the event.
toggle('left1'); // Toggle the left Slidebar.
});
$('.sb-toggle-left1').on('touchend click', function(event) {
eventHandler(event, $(this)); // Handle the event.
toggle('left1'); // Toggle the left Slidebar.
});
Dit is de eventhandler
Code (php)
1
2
3
4
5
2
3
4
5
function eventHandler(event, selector) {
event.stopPropagation(); // Stop event bubbling.
event.preventDefault(); // Prevent default behaviour
if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
}
event.stopPropagation(); // Stop event bubbling.
event.preventDefault(); // Prevent default behaviour
if (event.type === 'touchend') selector.off('click'); // If event type was touch turn off clicks to prevent phantom clicks.
}
Gewijzigd op 21/06/2015 20:53:52 door Fabian W
Mogelijk dat dit off topic is, of misschien juist wat je zoekt...
Op onze website hadden we een soortgelijk probleem waarbij we de index.php moesten scalen.
Voor ons werkt dit nu.
Wellicht dat je er iets aan hebt...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
//Scale for ipad,tablet and smartphone users
$urlpage = htmlspecialchars( basename( $_SERVER['PHP_SELF'] ) );
if(!isset($_GET['resolution']) || $_GET['resolution']==2) {
echo "<script language='JavaScript'>
if(window.innerHeight > window.innerWidth){
document.location='".$urlpage."?resolution=1&width='+window.outerWidth+'&height='+window.outerHeight;
}
</script>";
$widtha = isset($_GET['width']) ? $_GET['width'] : null ;
$heighta = isset($_GET['height']) ? $_GET['height'] : null ;
$scalesize = $widtha/1050;
}
elseif($_GET['resolution']==1) {
echo "<script language='JavaScript'>
if(window.innerHeight < window.innerWidth){
document.location='".$urlpage."?resolution=2&width='+window.outerWidth+'&height='+window.outerHeight;
}
</script>";
$widtha = isset($_GET['width']) ? $_GET['width'] : null ;
$heighta = isset($_GET['height']) ? $_GET['height'] : null ;
$scalesize = $widtha/1050; //echo " Scale=".$scalesize;
}
else{ $scalesize = 0.4; }
if($scalesize==0){ $scalesize = 0.81;} //default if nothing else works
?>
<meta name="viewport" content="initial-scale = <?php echo $scalesize; ?>,user-scalable = yes,width=1050">
//Scale for ipad,tablet and smartphone users
$urlpage = htmlspecialchars( basename( $_SERVER['PHP_SELF'] ) );
if(!isset($_GET['resolution']) || $_GET['resolution']==2) {
echo "<script language='JavaScript'>
if(window.innerHeight > window.innerWidth){
document.location='".$urlpage."?resolution=1&width='+window.outerWidth+'&height='+window.outerHeight;
}
</script>";
$widtha = isset($_GET['width']) ? $_GET['width'] : null ;
$heighta = isset($_GET['height']) ? $_GET['height'] : null ;
$scalesize = $widtha/1050;
}
elseif($_GET['resolution']==1) {
echo "<script language='JavaScript'>
if(window.innerHeight < window.innerWidth){
document.location='".$urlpage."?resolution=2&width='+window.outerWidth+'&height='+window.outerHeight;
}
</script>";
$widtha = isset($_GET['width']) ? $_GET['width'] : null ;
$heighta = isset($_GET['height']) ? $_GET['height'] : null ;
$scalesize = $widtha/1050; //echo " Scale=".$scalesize;
}
else{ $scalesize = 0.4; }
if($scalesize==0){ $scalesize = 0.81;} //default if nothing else works
?>
<meta name="viewport" content="initial-scale = <?php echo $scalesize; ?>,user-scalable = yes,width=1050">
Gewijzigd op 22/06/2015 08:42:43 door Eric T
Je zou wellicht via Less dingen kunnen uitzetten en deze niet importeren.
Maar als je netjes werkt met packages dan raadt ik je zeker aan niet te gaan uitkleden.
Ja er zit misschien meer in dan je nodig hebt, maar minified scheelt dat niet heel veel.
Gebruik Grunt and Bower om je packages binnen te halen en te compilen.
Toevoeging op 22/06/2015 10:09:47:
En @eric, wat een vreselijke code.
Ik kan me niet voorstellen dat goeie professionele developers dit gebruiken.
Los dit eerder in CSS op dan via php, javascript en shit
Jouw code lost helaas niet mijn probleem op. Buiten dat geeft het nieuwe problemen met formnavigatie. Toch bedankt.
@Rickert
Grunt en Bower ken ik niet, maar als je via de bootstrap officiele site bootstrap binnenhaalt zit er veel overbodige onzin in. Ikzelf heb het aangepaste bootstrap document van een andere bootstrap site geadopteerd. Dat werkt ook prima
Tenzij dit je motivatie is kun je gewoon Bootstrap gebruiken:
Maar goed dit is behoorlijk off-topic. Bootstrap is niet de oorzaak van mijn probleem.
En ik snap trouwens niet veel van je vraag, hij gaat naar een mobile versie van je website, maar je hebt geen mobile versie gemaakt? En je wilt op je mobiel navigeren naar de desktop versie? Als je met media queries werkt dit niet aangezien die kijkt naar de grote van het apparaat.
En Bootstrap is geen wiel, bootstrap is een wiel + velg + band + wieldop + spinners + complete achteras met aandrijf stang. Oftewel veel rootzooi wat je niet nodig hebt...
Hier heb je een link van een pagina op de site: http://dutchdance.bl.ee/index.php?ic=NL&ig=&il=50&is=Go