Responsive Web-Design, viewport

    Hallo,

    ich benötige mal eine grundsätzliche Einnordung in Sachen RWD (viewport, device-width).


    Mein Template weist allen Positionen untereinander von Head bis Foot eine 'width: 830px' (absolut) zu. Font-size : 18px für <p>, <span>, <td>.

    Im Content benutze ich eine Tabelle: links Text, rechts Bild.


    Dann habe ich mit viewport experimentiert und dachte, RWD wäre damit erledigt.


    Mit <meta name="viewport" content="width=830" /> wird die Seite im Handy scaliert (was aber wohl an Safari und nicht an viewport liegt).

    Mit <meta name="viewport" content="width=device-width", ..... /> wird in Safari nichts angepasst!? (hor. scrollen). Oder liegt das an der 2-spaltigen Tabelle?


    Google meckert, bietet aber auch Hilfe an. Ich weiß nur nicht, was sie mir sagen wollen. Ich hänge bei der angesprochenen Sinnhaftigkeit von vieport gleich zu Beginn fest.


    Vielleicht kann mich hier jemand auf die Schiene setzen.


    vG

    der_kps

    Hallo,

    Zitat von der_kps

    Im Content benutze ich eine Tabelle: links Text, rechts Bild.

    warum eigentlich? Wenn ich mir das mit Strg+Shift+M ansehe > ist nicht responsive.


    Ich selber, benutze das Protostar und habe lediglich (automatisch):

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

    & muss da nix "experimentieren".


    Benutze/schreibe doch ganz normal einen Text & lasse das Bild dann floaten. Und/oder mit div container.


    Liebe Grüße

    Christine

    In index.php (jetzt in http://www.ycsh80.de; in www.test. arbeite ich gerade an der Tabelle)
    habe ich o.g. viewport wieder eingefügt. Ergebnis:

    # am Desktop bleibt (natürlich) alles beim alten

    # mit STRG+U sehe ich in Firefox diesen viewport.

    # auf iPhone und iPad wird nicht skaliert (nach wie vor). Die Breite muss von Hand eingepasst werden. Nur der slider hat sich angepasst und 'nach oben/ToTop' ist weg.


    Oder ist in index-php etwas falsch.

    <head>

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

    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />

    <link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/favicon.ico" />

    </head>


    vG

    > Dann habe ich mit viewport experimentiert und dachte, RWD wäre damit erledigt.


    Du hast hier einen grundsätzlichen Denkfehler: die Viewport-Angabe ist ein Element von Responsive Design, ist aber nur sinnvoll wenn die Seite über sog. CSS Media Queries auch ein entsprechendes Mobillayout hat, das die Bedienung auf dem Smartphone ohne Zoom und horizontales Scrollen erlaubt. Ich würde dir daher empfehlen dass du dich mal grundsätzlicher in das Thema einliest und die Systematik verstehst, bevor du mit dem Viewport-Tag experimentierst.

    Hallo, alle zusammen!

    Es gibt so'n dummen Spruch mit 'Holzweg...' Habe ich aber vergessen. Doch dieser passt: 'Wenn du merkst, du reitest ein totes Pferd, steig ab!'
    Den Code von christine2 habe ich eingebaut, Ergebnis wie beschrieben.
    Als Techniker arbeite ich mit Tabellen, nur hier ist's wohl gerade nicht gut. Da bin ich dran. Und wie ich das bei 'AKTUELLES' (Termintabelle) mache, weiß ich noch nicht.
    Auch erinnere ich mich bei Schriftgröße an '1.2em' etc. Vielleicht ein Lösungsweg.

    Dieses Template habe ich mit ycsh80.de auf Joomla 1.0 geerbt und über 1.2; 1.5; 2.5 auf 3.x gebracht. Ich fasse die Seite eigentlich nur ein einziges Mal zu Beginn des Jahres an. In 2018 das Dropdown-Menü (das jetzt schon nicht mehr wirklich in RWB passt). Aktuell das RWB.
    Das Template wäre mir sicher böse, wenn ich es jetzt gegen ein neues eintausche. Also 'Spieltrieb'!

    Aber nun mal konkret. Gibt es irgend etwas, wo ich mich einlesen kann; ein Tutorial oder so?

    Z.Zt. habe ich '@media' bei 'self html' und 'w3schools'. Spruch? 'Mühsam & Eichhörnchen'.
    Die Ausführungen bei Google (ich sagte es schon) kommen bei mir nicht an. Ich weiß nicht, was die mir eigentlich sagen wollen.


    vG

    der_kps

    Zitat

    Dieses Template habe ich mit ycsh80.de auf Joomla 1.0 geerbt und über 1.2; 1.5; 2.5 auf 3.x gebracht


    Vielleicht wäre hier ein aktuelles, responsives Template angebracht.


    Wäre mit dem responsiven Protostar leicht nachzubauen!



    Zitat

    Wenn du merkst, du reitest ein totes Pferd, steig ab!'


    Das macht man nicht! ?(

    Was macht man nicht?
    Egal!


    Ich höre auch gerade von meinem A+++ Hoster

    https://www.fc-hosting.de/joomla/
    dass es auf meinem Level besser ist, ein freies responsives Template anzupassen.


    Tschüß 'ycsh80-hv1-Template' Es war eine schöne Zeit ;(

    13 Jahre und von 1.0 stets mitgewachsen (schnief).


    Ich schließe hier mal ab und bedanke mich für die Hinweise

    vG