kostenloser Webspace werbefrei: lima-city


CSS entwickeln für das Smartphone

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    jonas-bayer

    jonas-bayer hat kostenlosen Webspace.

    Hallo!

    Gerade optimiere ich eine Website zur Benutzung mit mobilen Endgeräten. Dazu habe ich einfach alles auf meinen Webspace hochgeladen. Wenn ich Änderungen am Stylesheet vornehme, dann aktualisiere ich dieses auf dem Server. Der Arbeitsprozess ist recht angenehm, wenn es auch mehr Klicks sind als beim reinen Arbeiten am PC.

    Nun habe ich aber ein Problem: Google Chrome benutzt CSS-Dateien aus dem Cache. Auch bei Neuladen der Seite in einem anderen Tab, werden diese nicht aktualisiert. Kennt ihr eine Einstellung, mit der man das verhindert?
    Bei Firefox gibt es das gleiche Problem...

    Und ein mindest genauso großes Problem: Welche sinnvollen Media-Queries gibt es denn überhaupt um ein Smartphone zu bestimmen? "handheld" funktioniert nirgends und bei max-width muss ich um die 1000px angeben, um die Regel bei meinem Handy geltend zu machen... Dann sieht das aber schon wieder im Browser hässlich aus!

    mfg
    Jonas

    Beitrag zuletzt geändert: 13.8.2015 8:30:52 von jonas-bayer
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Eigentlich müsste mit strg+f5 alles komplett neu geladen werden.

    Alternativ könntest du auch zeitweilig den Browser-Cache komplett ausschalten (im FF unter Erweitert>>Netzwerk).

    Schließlich könntest du noch das caching per .htaccess deaktivieren.

    Welche media-queries sinnvoll sind, hängt stark vom Aufbau deines Design ab. Schau dir mal diese Seite
    http://www.liquidapsive.com/
    bzw. deren Quellcode incl. der CSS-Datei an.

    Beitrag zuletzt geändert: 13.8.2015 11:55:54 von mein-wunschname
  4. Autor dieses Themas

    jonas-bayer

    jonas-bayer hat kostenlosen Webspace.

    mein-wunschname schrieb:
    Eigentlich müsste mit strg+f5 alles komplett neu geladen werden.


    Ich zitiere mich selbst:

    jonas-bayer schrieb:
    Gerade optimiere ich eine Website zur Benutzung mit mobilen Endgeräten.

    mobile Endgeräte = Tablet, Smartphone, vllt. auch Smartwatch etc. Ich wüsste nicht, das die eine Strg- bzw. eine F5-Taste haben :wink:

    Mittlerweile konnte ich allerdings eine Lösung finden, indem ich durch PHP den Namen des Stylesheets ändere, was auch gut funktioniert.

    mfg
    Jonas

    Beitrag zuletzt geändert: 13.8.2015 11:58:02 von jonas-bayer
  5. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Oh je, ja klar. Ich nutze in erster Linie Chromes Entwicklertools am PC für solche Zwecke, weil ich ja eine Webseite nicht nur für mein Smartphone mache.

    Ist aber trotzdem eine interessante Frage: Womit ist ein Refresh beim Smartphone (beim FF im Menü; bei Chrome in der Adressleiste) vergleichbar?

    Beitrag zuletzt geändert: 13.8.2015 13:44:51 von mein-wunschname
  6. Autor dieses Themas

    jonas-bayer

    jonas-bayer hat kostenlosen Webspace.

    Wenn man in die Adresszeile tippt und dann auf Enter auf der Tastatur, die erscheint wird die Seite neu geladen.

    Das caching habe ich folgendermaßen verhindert:

    <link rel="stylesheet" src="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

    Somit ändert sich der Link und die Datei wird neu geladen.

    mfg
    Jonas

    Beitrag zuletzt geändert: 13.8.2015 13:56:36 von jonas-bayer
  7. Wenn du mit Chrome in die Entwicklertools gehst gibt es oben links auch ein Handysymbol womit du so tust als währe dein Destop ein Handy (z.B. touch events funktionieren). Da kann man das Cachen auch im dropdownmenü abschalten, Latenzen simulieren (aber wenn man möchte ist es durch eine bessere Verbindung auch schneller), verschiedene Geräte simulieren, ... . Das finde ich deutlich sinnvoller als es direkt mit einem (einzigen) Handy zu machen :)
  8. hi,

    ist das denn eine responsive Website oder hat die website "nur" ein zusätzliches mobiles Layout?

    mfg
  9. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    adots schrieb:
    hi,

    ist das denn eine responsive Website oder hat die website "nur" ein zusätzliches mobiles Layout?

    mfg


    Ich glaube, dass sich alle Fragen auf ein responsives Layout beziehen, also eine Website für alle Geräte,
  10. Autor dieses Themas

    jonas-bayer

    jonas-bayer hat kostenlosen Webspace.

    w3j schrieb:
    Wenn du mit Chrome in die Entwicklertools gehst gibt es oben links auch ein Handysymbol womit du so tust als währe dein Destop ein Handy (z.B. touch events funktionieren). Da kann man das Cachen auch im dropdownmenü abschalten, Latenzen simulieren (aber wenn man möchte ist es durch eine bessere Verbindung auch schneller), verschiedene Geräte simulieren, ... . Das finde ich deutlich sinnvoller als es direkt mit einem (einzigen) Handy zu machen :)

    Ehrlich gesagt bin ich mit diesen Tools nicht so zufrieden. Da mein Projekt privat ist, muss es auch nur an meinem Handy funktionieren, also kann ich mir den Ärger sparen.
    Ich habe jetzt vor allem via Firefox getestet und das Handy mit dem Computer verbunden dazu...

    MFG
    Jonas
  11. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!