Mobile Version Für Website

EmaxXism · 7. März 2016

Hallo leute, heute habe ich mal eine Bitte an all unsere erfahren coder, ich bin neuling auf diesem gebiet.
Das meiste meines Wissens habe ich mir ergooglt und den rest per Try and Error herausgefunden, die Seite läuft soweit.
Ich habe eine Mobile Weiterleitung (Automatisch) über die .htacess eingefügt (siehe unten).
Folgendes Problem zum einen, Ich muss in diesem Mobilen Verzeichnis die Gesamte Website als HTML Dokumente ablegen, damit diese geladen werden, obwohl sich nur die index.html unterscheidet. Die Desktop Version ist inzwischen auf php umgestellt. Sowie ich in diesem Verzeichnis auch alle Bilder speichern muss in der gleichen Ordnerstruktur.
Nun also folgende zwei fragen:
Kann ich die .htacess so einstellen das nur die mobile Index geladen wird?
Derzeit wird automatisch in den Ordner /m/ navigiert. ist es hier also möglich z.b. auf eine (z.B) mindex.html weiterzuleiten?
Dabei müsste aber auch wenn im Nav menü wieder auf startseite geklickt wird wieder auf die Mobile Seite geleitet werden.
Falls Rückfragen bestehen bitte fragen, ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

Website Link
Codeschnipsel:

Apache Configuration: .htacess

RewriteEngine on


# don't apply the rules if you're already in the mobile directory, infintine loop
RewriteCond %{REQUEST_URI} !^/m/.*$
# if the browser accepts these mime-types, it's definitely mobile, or pretending to be
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC,OR]
# a bunch of user agent tests
RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|mobile.+firefox|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ ce|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^(.*)$ http://www\.germancoaster\.de/m/$1 [R=301,L]

Alles anzeigen

H4rd_B4se · 7. März 2016

Eine andere Möglichkeit ist, das Design via CSS einfach an die Displaygröße anzupassen.
https://developers.google.com/…s/use-media-queries?hl=de

intel_c0re · 7. März 2016

Du könntest via Javascript auf eine mobile .html Seite weiterleiten, dieser erkennt dann ob die Bildschirmbreite <=800px beträgt oder nicht. "Quick and dirty", eben:

HTML

<script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://beispiel.com/mobil.html";
  }
  //-->
</script>

Falls du in der Navigation einen Button einbauen willst, der auf die Desktopversion weiterleitet, kannst du (wenn du weiterhin ohne Cookies arbeiten willst) mit PHP einen Modus einbauen, zum Beispiel "http://beispiel.com/index.php?=forcedesktop"
Zum Beispiel so.

Solltest du mit Bootstrap oder anderen Frameworks arbeiten (wollen), was auf deiner Seite nicht so aussieht, kannst du mit CSS automatisch die Displaygröße erkennen lassen und die Standard-Indexseite verändern.
Link dazu hier.

EmaxXism · 7. März 2016

Zitat von intel_c0re
Du könntest via Javascript auf eine mobile .html Seite weiterleiten, dieser erkennt dann ob die Bildschirmbreite <=800px beträgt oder nicht. "Quick and dirty", eben:
HTML
<script type="text/javascript">
  
</script>

Die Methode gefällt mir, ich teste das mal kurz aus, falls Rückfragen bestehen melde ich mich

E:\\
Super!
Das klappt spitze, danke für die schnelle Hilfe

intel_c0re · 7. März 2016

Zitat von EmaxXism

Super!
Das klappt spitze, danke für die schnelle Hilfe

Kein Problem.
Allerdings musst du beachten, dass das Endgerät auch Java unterstützen, bzw. es aktiviert haben muss.
Viele ältere Handys haben dieses nicht standardmäßig aktiviert, also wäre eine manuelle Menütaste, die auf die mobile Seite weiterleitet angebracht, oder eine Meldung, dass für eine volle Funktionalität der Webseite Javascript aktiviert sein muss.

Pall. · 7. März 2016

Zitat von intel_c0re

Kein Problem.Allerdings musst du beachten, dass das Endgerät auch Java unterstützen, bzw. es aktiviert haben muss.
Viele ältere Handys haben dieses nicht standardmäßig aktiviert, also wäre eine manuelle Menütaste, die auf die mobile Seite weiterleitet angebracht, oder eine Meldung, dass für eine volle Funktionalität der Webseite Javascript aktiviert sein muss.

So gut wie alle Smartphone sind mittlerweile fähig es wieder zu geben. Sehr viele Websites setzen es mittlerweile voraus. Man kann ja nicht immer auf das erste Nokia rücksicht nehmen beim coden.

EmaxXism · 7. März 2016

Danke für den hinweis, das war mir auch bewusst, die box mit den bildern läuft auch auf JS daher klappt die ganze startseite dann nicht.
Einen hinweis werde ich noch einfügen danke für den tipp

maddin · 7. März 2016

Damit zeigst du dann jedem den Stinkefinger der Javascript deaktiviert hat. Und das machen nicht wenige, allein schon aus Sicherheitsgründen.

Für Mobile Layouts ist und bliebt das arbeiten mit CSS media querys die beste Methode.

intel_c0re · 7. März 2016

Zitat von maddin

Damit zeigst du dann jedem den Stinkefinger der Javascript deaktiviert hat. Und das machen nicht wenige, allein schon aus Sicherheitsgründen.

Browser lassen von Haus aus nicht alle Funktionen, die Javascript verwenden kann, zu. Viele Größere Webseiten benutzen JQuery/JavaScript/Ajax als Kombination und weigern sich auch nicht, auf etwas anderes umzusteigen.
Müssen sie auch nicht.
Wer aus Sicherheitsgründen Javascript deaktiviert, muss wohl eine sehr große Angst davor haben, was der böse Seitenbetreiber denn mit seinen Daten anstellen will.

ChristianW · 7. März 2016

Also mein Handy hat Full HD Da bringt es nichts die width über JS abzufragen

seegras · 7. März 2016

Zitat von ChristianW

Also mein Handy hat Full HD Da bringt es nichts die width über JS abzufragen

Sprich ne Auflösung von 1920*1080?

ChristianW · 7. März 2016

Zitat von seegras

Sprich ne Auflösung von 1920*1080?

Jap (ist nen iPhone 6 Plus)

maddin · 7. März 2016

Zitat von intel_c0re

Browser lassen von Haus aus nicht alle Funktionen, die Javascript verwenden kann, zu. Viele Größere Webseiten benutzen JQuery/JavaScript/Ajax als Kombination und weigern sich auch nicht, auf etwas anderes umzusteigen.

Was hat das mit dem was ich geschrieben habe zu tun?

intel_c0re · 7. März 2016

Zitat von ChristianW

Also mein Handy hat Full HD Da bringt es nichts die width über JS abzufragen

Funktioniert bei mir perfekt:
(Samsung Galaxy S6; 1440x2560; Google Chrome)

Spoiler anzeigen

ChristianW · 7. März 2016

Dir ist bewusst das AJAX => Asynchron Javascript and XML heisst und jQuery lediglich nen JS Framework ist, unterstützt ein Handy das nicht funktioniert das auch nicht. Responsive Designs macht man eigentlich mit CSS und Media Queries.

Pall. · 9. März 2016

Zitat von ChristianW

Jap (ist nen iPhone 6 Plus)

Ist doch 1080*1920. Deshalb wird man da auch schnell den Unterschied zum Desktop erkennen können.

ChristianW · 9. März 2016

Nö mit JS einfach die width vom Fenster nehmen eben nicht ^^ausserdem ist die Auflösung 1920*1080nicht andersru

Pall. · 9. März 2016

Das Iphone ist doch standartmäßig gesehen höher als breit. Man hält es nicht quer. Für den Browser oder sonst was kommt es doch genauso rüber ?
http://www.paintcodeapp.com/ne…one-6-screens-demystified

H4rd_B4se · 9. März 2016

@ChristianW
dann geh mal auf http://www.whatismyscreenresolution.com/ und sag was da steht.

Akino Kiritani · 9. März 2016

@H4rd_B4se

Wenn er das handy im Landscape verwendet, also quer hält, stimmt das was er sagt. Hält er es hochkant, dann wiederrum nicht.