Mobile Site parallel zu Desktop Site?

[flip-flop]

Also bei mir erkennt die Seite die Eingabeinheit, wenn ich dem Browser z.B. den User Agent iPhone mitgebe (Android Gerät).
Mit dem Original habe ich es auch noch nicht getestet. Was kommt denn dort an beim User Agenten?
CMS: r452.

[nameless1]

Ich habe kein eigenes Fallobst Gerät. Du testest mit der <!--if:mobile--> ?

[flip-flop]

Ich verwende das Test- Snipsel aus dem wiki.
Dabei wird “mobile“ ausgeworfen.

[Oliver Georgi]

Die Frage ist, mit welchen Geräten getestet wird. Die Androiden mögen teils eigene, verbogene User Agent Strings nutzen. Alle Tablets habe ich von Mobile ausgenommen, wie korrekt angemerkt wurde.

[nameless1]

Guten Morgen,

der Kunde hat mit einem 4er IPhone auf dem r452 getestet nachdem ich wieder auf <!--if:mobile--> umgestellt habe.

Gruß

nml1

[Oliver Georgi]

Kann ich gleichfalls nicht nachvollziehen. Mit iPhone 4 läuft es wie es soll – mobile wird erkannt.

Code: Select all

<!--if:mobile-->
<span style="color:blue">Mobilgerät</span>
<!--/if-->

[flip-flop]

Oder hat der Kunde am User-Agenten rumgefummelt, ohne dass er es vielleicht selbst weiß?

Gründe dafür scheint es zu geben. Z.B. http://www.meinungs-blog.de/user-agent- ... dern-10973

[nameless1]

@flip-flop:
das habe ich auch schon vermutet. ebenso wie das og eng an apple entwickelt/ testet.
der kunde hat wirklich an seinen settings rumgespielt. sorry für die aufruhe!

nml1

[santscho]

Hier grob zusammengefasst mit einem Hilfsscript: User Agent

Hallo Knut
Wie kann so etwas in einem CP template umsetzten? Ich stelle mir das etwa so vor (Beispiel Teaser CP):

Code: Select all

<!--if:device:Desktop-->
<!--TEASER_HEAD_START//-->
<!--TEASER_ENTRY_START//-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//--> 
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!-- CSS: {TEMPLATE}lib/teaser_desktop/teaser_desktop.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser_desktop.js -->
<!--TEASER_FOOTER_END//-->
<!--/if-->

<!--if:device:Smartphone--> OR <!--if:device:Tablet-->
<!--TEASER_HEAD_START//-->
<!--TEASER_ENTRY_START//-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//--> 
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!-- CSS: {TEMPLATE}lib/teaser_mobile/teaser_mobile.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser/mobile/teaser_mobile.js -->
<!--TEASER_FOOTER_END//-->
<!--/if-->

[Oliver Georgi]

Du kannst das nicht doppeln, also darfst die Basisstruktur des Templates nicht verändern. Den Inhalt des Templates kannst Du beeinflussen. Denn erst wird das Template gerendert dann wird das „Rohgerüst“ geparst und entsprechend ausgegeben.

Code: Select all

<!--if:device:Desktop-->Desktop<!--/if--><!--if:device:SmartPhone,Tablet-->SmartPhone OR Tablet<!--/if-->

Ob Du jetzt das auf Klassen oder Tags anwendest, bleibt Dir überlassen.

[santscho]

Das heisst, es muss etwa so aussehen:

<!--TEASER_HEAD_START//-->
<!--if:device:Desktop--> template code <!--/if--> <!--if:device:Smartphone--> template code smart phone <!--/if-->
<!--TEASER_ENTRY_START//-->
<!--if:device:Desktop--> template code <!--/if--> <!--if:device:Smartphone--> template code smart phone <!--/if-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->
<!--if:device:Desktop--> template code <!--/if--> <!--if:device:Smartphone--> template code smart phone <!--/if-->
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!--if:device:Desktop-->
<!-- CSS: {TEMPLATE}lib/teaser_desktop/teaser_desktop.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser_desktop.js -->
<!--/if-->
<!--if:device:Smartphone-->
<!-- CSS: {TEMPLATE}lib/teaser_mobile/teaser_mobile.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/teaser/mobile/teaser_mobile.js --> template code smart phone
<!--/if-->
<!--TEASER_FOOTER_END//-->

[Oliver Georgi]

prinzipiell ja, bin mir mit den JS/CSS Replacern gerade nicht ganz sicher. Probiere es. Hier würde ich an Deiner Stelle aber dann auf 1 CSS setzen, die entsprechende CSS Anweisungen für die Bildschirmgrößen setzt.

[santscho]

Wuerde das gerne ausprobieren. Aber funktionieren denn die <!--if-Anweisungen schon im letzten Release, oder muss ich noch via Fronten-Render-Script laden?

[Oliver Georgi]

…alles drin. Aber in Config aktivieren:

Code: Select all

$phpwcms['render_device'] = 1;

[santscho]

Yes! Das funktioniert. Getestet mit einem einfachen Template...

Code: Select all

<!--TEASER_HEAD_START//-->
<!--if:device:Tablet-->
I am a tablet. This is the header
<!--/if-->
<!--if:device:Desktop-->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:1000px; height:300px;">
<div class="preload"><div></div></div>
  <div class="lof-main-outer" style="width:1000px; height:300px;">
    <div onclick="return false" href="" class="lof-previous">Previous</div>
  	<ul class="lof-main-wapper">
<!--/if-->
<!--TEASER_HEAD_END//-->
<!--TEASER_ENTRY_START//-->
<!--if:device:Tablet-->
I am a tablet. This is the entry start <br>
<!--/if-->
<!--if:device:Desktop-->
<li>
[IMAGE]{IMAGE}[/IMAGE]          
<div class="lof-main-item-desc" style="z-index:1;">
<h3><a href="{ARTICLELINK}">{TITLE}</a></h3>
<p>{SUMMARY}</p>
<p><a class="readmore" href="{ARTICLELINK}">Read more</a></p>
</div>
</li> 
<!--/if-->
<!--TEASER_ENTRY_END//-->
<!--TEASER_SPACER_START//-->  
<!--TEASER_SPACER_END//-->
<!--TEASER_FOOTER_START//-->
<!--if:device:Tablet-->
I am a tablet. This is the footer
<!--/if-->
<!--if:device:Desktop-->
</ul>  	
<div onclick="return false" href="" class="lof-next">Next</div>
</div>
</div>
<!-- CSS: {TEMPLATE}lib/lofslidernews/css/style6.css -->
<!-- JS: easing --><!-- JS: {TEMPLATE}lib/lofslidernews/js/lofslider.js -->
<!-- JS:
 $(document).ready( function(){	
		var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
						next:$('#lofslidecontent45 .lof-next') };
						
		$obj = $('#lofslidecontent45').lofJSidernews( { interval : 5000,
												direction		: 'opacity',	
											 	easing			: 'easeOutBounce',
												duration		: 1000,
												auto		 	: true,
												mainWidth:1000,
												buttons			: buttons} );	
	});
-->
<!--/if-->
<!--TEASER_FOOTER_END//-->