responsive design .httaccess

[brainstuff]

Hallo,

ich experimentiere zur Zeit mit responsivem Design. Es gibt manchmal Internet Seiten, die auf PC Bildschirmen besser kommen, wenn man da eine eigenständige Version (keine responsive Version) für den PC macht und das dann per .httaccess umschaltet.

Standard-Beispiel ist für mich eine Seite, die als Background ein ganzseitiges Bild (oder Video) hat. Die kommt dann gut auf dem PC Bildschirm aber das Hintergrundbild geht nicht auf dem Smartphone, zumindestens nicht im Portrait Modus. Im Landscape Modus kommt das besser, aber verzerrt oder nur ein Teil der Seite.

Auf der responsiven Version muss ich das Background-Bild als ganz normales Bild nutzen. Das heisst dann, dass das ganze Seiten Layout ändert. Da bringe ich jetzt nur per eigenständige Version für den PC mit .httaccess hin.

Hat jemand hier Erfahrung mit diesem Problem und hat schon ausprobiert wie man das mit einem normalen responsiven script lösen kann.

Danke,

Brainstuff

 

[daddl3]

Dafür gibt es die Media Queries.
Die sind für Einstellungen, wenn die Bildschirmgröße variiert und werden einfach in die css eingetragen.
Mit .htaccess habe ich in dem Zusammenhang noch nie gehört.

 

[Aaron3219]

Es ist prinzipiell erstmal möglich einen Mobile Redirect zu machen. Dies ist auf demselben Wege zu erreichen, wie du es auch in JavaScript machen würdest: User-Agents. Du würdest in deiner .htaccess Datei den User-Agent checken und dementsprechend umleiten. Das Thema wurde bereits auf SO mit verschiedenen Lösungsansätzen diskutiert.

Ich persönlich bin allerdings kein Fan von User-Agent sniffing. I.d.R. gibt es immer einen besseren Weg, der sauberer ist und auch besser funktioniert. Es gibt zahlreiche ausführliche Artikel über User-Agent sniffing und warum man es unter allen Umständen vermeiden sollte. Mein persönlicher Favorit ist folgender:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

Es gibt in diesem Artikel auch einen Absatz spezifisch für dein Problem:
https://developer.mozilla.org/en-US..._using_the_user_agent#Mobile_Device_Detection
Der Rest des Artikels ist allerdings ebenfalls lesenswert.
Ein kurzer Ausschnitt sollte dir einige der vielen Probleme aufzeigen:

Arguably the most common use and misuse of user agent sniffing is to detect if the device is a mobile device. However, people too often overlook what they are really after. People use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. While user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart TV's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! So, user agent sniffing is definitely not the way to go. Thankfully, there are much better alternatives. Use Navigator.maxTouchPoints to detect if the user's device has a touchscreen. Then, default back to checking the user agent screen only if (!("maxTouchPoints" in navigator)) { /*Code here*/}. Using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself. Rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using CSS by simply increasing the font size). Here is an example of code that increases the padding of #exampleButton to 1em on mobile devices.

Nachdem ich dich (hoffentlich) davon überzeugt habe auf deine ursprünglich geplante Methode zu verzichten, komme ich nun zum Lösungsansatz, den du (wenn ich dich richtig verstehe) auch schon als Alternative vorgeschlagen hast und vorgeschlagen bekommen hast: Media queries.
Generell bekommt man mit dem richtigen Styling und Aufbau seiner HTML-Struktur eigentlich alles ohne mobile redirect hin. Wenn es hart auf hart kommt, dann kann man immer noch Elemente einfach vollständig ausblenden/entfernen und andere dafür einblenden/nachladen.

Ich empfehle dir, dich intensiv mit media queries zu beschäftigen, da das Design für mobile Endgeräte mittlerweile wichtiger ist als das Design für große Bildschirme.
Google stellt auf Mobile First-Indexierung um und für eventuelle Fragen gibt es ja uns . Aber bitte erst fragen, nachdem du selbst recherchiert hast .

Dann solltest du das hier:

Standard-Beispiel ist für mich eine Seite, die als Background ein ganzseitiges Bild (oder Video) hat. Die kommt dann gut auf dem PC Bildschirm aber das Hintergrundbild geht nicht auf dem Smartphone, zumindestens nicht im Portrait Modus. Im Landscape Modus kommt das besser, aber verzerrt oder nur ein Teil der Seite.

auch ohne Probleme hinbekommen.