[GELÖST] Seite für mobile Devices?

noober · 02. Mai 2012 15:56

Hallo,

ich habe eine bestehende Seite und möchte nun eine "verkleinerte" Version für die Darstellung auf kleineren Bildschirmgrößen hinzufügen.

Konzeptionell und "designtechnisch" ist die mobile Seite fertig. Nun möchte ich beginnen diese umzusetzen. Nach ein wenig Stöbern im Internet glaube ich zu wissen, dass ich entweder auf einer Unterdomain eine neue Seite erstelle und diese über .htaccess und die config.php aufrufe.
Ich lese aber auch ständig, dass die "Ansteuerung" auch über Media queries funktioniert,
z.B. "<link rel="stylesheet" type="text/css" href="sd-mobile.css" media="screen and (max-width: 450px)" />"
diese Version wäre mir lieber, leider passiert bei der Einbindung des Media queries ins Startseite Template nichts ...

CMS-Version 1.9.4.2

Wir gehe ich hier vor, vielen Dank schon mal im vorraus für Tips und Hilfe.

Grüße

Beitrag geändert von noober (02. Mai 2012 15:57)

NaN · 02. Mai 2012 18:54

Ist das das einzige Stylesheet?
Bzw. was ist mit dem "Desktop Stylesheet"?
Wird das auch über Media Queries eingebunden?

Cherry · 02. Mai 2012 19:05

Also ich mache das immer so:
Zunächst kommt diese hier in den head Bereich:

Hier klicken, um den Code zum Kopieren zu markieren

<meta name="viewport" content="width=device-width, initial-scale=1.0">

danach binde ich das stylesheet ein, z.B. so: ( ich hab's gerne extern, geht aber sicher auch mit cmsms Methoden)

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" href="css/mystylesheet.css" type="text/css">

dann kommt ins normale stylesheet erst mal alles wie bisher auch.
Dann erweitere ich es um die Bereiche für die verschiedenen Anzeigegrößen also z.B.

Hier klicken, um den Code zum Kopieren zu markieren

@media screen and ( max-width: 800px ) {
....
}

Weitere solche Abschnitte kannst nach Belieben hinzufügen und dort drin dann eben definieren was für die entsprechende Auflösung sein soll.

Hoffe mal, das gibt dir ne Grundidee wie's gehen könnte.

Wo du deine 'breakpoints' setzt bleibt dir überlassen. Wenn du mehr zu dem Thema lesen willst: 'Responsive Webdesign' wäre das Stichwort.

Beitrag geändert von Cherry (02. Mai 2012 19:07)

noober · 03. Mai 2012 14:12

So, jetzt hab ich die Testseite soweit gebaut, habe aber festgestellt, dass sie ein neues (deutlich schlankeres) Template haben kann, die Stylesheets sind um ca. 1/2 verkürzt. Die Seite liegt jetzt als Unterseite heinter einem Internen Seitenlink. Die Umleitung geht mittels .htaccess so

Hier klicken, um den Code zum Kopieren zu markieren

.......................................................................................................................................

Options +FollowSymLinks
RewriteEngine on
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^$ [url]http://www.domain.de/mobile/home.htm[/url] [R,L]

.........................................................................................................................................

Bisher funktioniert es mit iPhone, HTC und User Agent ...

Danke für die Tips und Hilfe. Die nächste Seite baue ich im Hinblick "mobile first" und Media Queries.

Beitrag geändert von noober (03. Mai 2012 14:13)

Forum für CMS/made simple

#1 02. Mai 2012 15:56

[GELÖST] Seite für mobile Devices?

#2 02. Mai 2012 18:54

Re: [GELÖST] Seite für mobile Devices?

#3 02. Mai 2012 19:05

Re: [GELÖST] Seite für mobile Devices?

#4 03. Mai 2012 14:12

Re: [GELÖST] Seite für mobile Devices?

Fußzeile des Forums