Einige Vorarbeit hatt ich bereits gemacht. so dass der aktuelle Stand sich im Moment so wie im Link darstellt/ zu sehen!
Öffnet das Link und schiebt mal manuell den Brwoser zusammen und benutz auch das flip-flop-Menu. Ich habe das auch auf Onlineemulatoren gesprüft und die Darstellung sieht wie folgt aus ( irrelevant sind momentan hübsche jQuery-Web-Design etc!!):
Die Erläuterung meines Vorgehens ist eigentlich recht einfach:
Auf meiner Testseite habe ich als erstes eine Vorlage (Template) erzeugt. Dieses sieht aktuell so aus:
[HEAD]
Code: Select all
<meta name="viewport" content="width0device-width, initial-scale=1" />
<script type='text/javascript'>
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "/template/small_frontend.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "/template/medium_frontend.css");
} else {
$("#size-stylesheet").attr("href", "/template/wide_frontend.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
<link type="text/css" rel="stylesheet" media="screen and (max-width: 700px)" href="template/inc_css/small_frontend.css" />
<link type="text/css" rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="template/inc_css/middle_frontend.css" />
<link type="text/css" rel="stylesheet" media="screen and (min-width: 901px)" href="template/inc_css/wide_frontend.css" />Code: Select all
<div data-role="header"><h1>Mobile Spielwiese</h1></div>
<div class="nlu_navi1">{NAV_LIST_UL:F,24,1,,active}</div>
mobile_frontend.css:
Code: Select all
#container { margin: 5px auto; width: 100%;}
#container > div { }
#header {
background: #EEEEEE;
border: 1px solid #ffffff;
color: black;
margin-bottom: 5px;
}
#mainBlock {
background: #EEEEEE;
border: 1px solid #0000ff;
color: black;
margin: 5px 0;
padding: 20px;
min-height: 220px;
}
#rightBlock, #leftBlock { display: none; }
#footerBlock {clear: both; }Code: Select all
/* schmale Breite */
body { background-color: #333333; color: #ED5D5D; }
#container { width: 100%; }
#container:after { content: "small_frontend.css"; }
#mainBlock { background-color: #00a800; min-height: 220px;; }
#leftBlock, rightBlock { display: none; } Code: Select all
/* mittlere Breite */
body { background-color: #666666; }
#container { color: #ffffff; }
#container:after { content: "middle_frontend.css"; }
#mainBlock { background-color: #B7F8A4; min-height: 220px;; }
#leftBlock, #rightBlock { display: none; }wide_freontend.css:
Code: Select all
/* volle Breite */
body { background-color: #999999; }
#container { position: relative; width: 980px; }
#container:after { content: "wide_frontend.css"; }
#mainBlock { }
#leftBlock, rightBlock { display: none } Jetzt kommt der Lösungsansatz für eine normale und mobile Website (siehe auch hier: http://www.phpwcms-howto.de/wiki/doku.p ... re-domains) In einer dieser Website in der Website stellt man (eigene oder/und bereits im Projekt vorhanden Informationen mit z.bsp. {SHOW_CONTENT:CP, xxx } zusammen und packt diese dann in die neue mobile Website, die durch eine TLD oder Subdomain angesteuert werden kann. Fertig ist erst einmal der Lösungsansatz für eine mobile Website.
Es sind aber noch Dinge zu klären, ob es lohnenswert ist Bilder zu verbrößern, Bild-Templates auf "%" umzustellen .... aber das sind wohl eher Kleinigkeiten, denn auf einem mobilen Gerät ist es wenig sinnvoll große Bilder zu übertragen - wofür eigentlich
Im Ergbinis kann mann dann aus einer solchen Destop-Website mit einer geschickten Auswahl aus dieser eine mobile Seite wie mein Beipsiel zeigt zaubern, allerding ist hierfür ein anderem Modul verwendet worden, aber - es geht dann auch mit phpWCMS!
