kostenloser Webspace werbefrei: lima-city

Webseite automatisch vergrößern/verkleinern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   20:41, 29.8.2018

   Hallo,
   ist es möglich einer Webseite einen tag/befehl">Befehl mit zu geben, der jeden aufrufenden Browser veranlasst die Seite um einen bestimmten Prozentsatz zu vergrößern oder zu verkleinern.
   
   Konkret, ich möchte bewirken, dass die Darstellung der MukerBude in jedem Browser um 10% vergrößert wird.
   
   Danke schon mal im voraus
   sagt

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

3. h***********r

   22:07, 29.8.2018

   Hm...
   ich könnte mir vorstellen das dass im css entweder über zoom oder transform: scale zu lösen ist.
4. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   12:18, 30.8.2018

   Jein...
   beide Befehle beziehen m.E. auf innere Elemente, nicht auf die gesamte WebSite.
   Alle Browser können das was ich möchte, heißt i.d.R. Zoomen, oder einfach mit ctrl + / -.
   
   Ich hatte da mehr an den meta-tag gedacht: <meta name="viewport" content="width=PixelAngabe">
   der läßt aber leider keine % Angaben zu.
   
   Beitrag zuletzt geändert: 31.8.2018 19:35:27 von mukerbude

5. fits-radio

   fits-radio hat kostenlosen Webspace.

   22:05, 31.8.2018

   <meta name="viewport" content="width=device-width, initial-scale=1.25, shrink-to-fit=no">

   
   
   Hi,
   mit dem Code solltest du deine Seite um 25% vergrößert anzeigen...
   
   Nicht getestet, aber wenn ich mich recht erinnere...
6. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   13:37, 1.9.2018

   @fits.radio,
   schade funktioniert nicht, macht nichts.
   shrink-to-fit=no werkt nur im Safari Browser.

7. prinz-und-gloeckner

   prinz-und-gloeckner hat kostenlosen Webspace.

   16:49, 1.9.2018

   Die Funktionalität ist bei CSS erst im Stadium eines Arbeitsentwurfes:
   https://www.w3.org/TR/css-device-adapt-1/
   (Microsoft Edge, Opera Mini haben dafür wohl eine experimentelle Implementierung)
   
   
   Die Methode von Apple mit dem meta-Element wird als schlecht und daher zu vermeiden betrachtet, weil diese Dekoration mit Inhalt mischt, es geht ja gar nicht um eine Meta-Information über die Seite, stattdessen haben wir einen Vorschlag zur Dekoration.
   
   Bei Seiten, die mit CSS sinnvoll gestaltet sind, sollte das sowieso unnötig sein.
   Die Nutzer sollten ja die Schriftgröße passend für ihre Gerätschaften und ihre Sehgewohnheiten und -möglichkeiten eingestellt haben. Ein sinnvoll gestaltetes Seiten-Layout wird sich daran orientieren, weswegen sich die Darstellung automatisch an die Sehgewohnheiten anpaßt.
   Für Verfeinerungen gibt es zudem ja die Medien-Anfragen (media-queries) in CSS.
   
   Was willst du genau um 10% größer haben und warum?
   Was eine sinnvolle Darstellungsgröße für das jeweilige Publikum ist, hängt doch von der Geräteauflösung, dem Betrachtungsabstand und der Sehfähigkeit ab.
   Darüber haben Autoren insgesamt gar keine Kenntnis, können somit auch nicht beurteilen, welche Größe sinnvoll wäre.
   
   Bei der Schrift gibst du bei Bedarf bei den betroffenen Elementen einfach font-size: 1.1em (oder font-size 1.1rem) an.
   Typisch finden solche Angaben Anwendung bei Überschriften, nicht für den laufenden Text.
   
   Bei Pixelbildern oder Graphiken sind solch kleine Änderungen wohl ohnehin meist nicht sinnvoll.
   Bei Pixelbildern verschlechtert es die Qualität der Präsentation, bei Graphiken (SVG) kann man die Größe ja gleich passend angeben.
   
   

8. fits-radio

   fits-radio hat kostenlosen Webspace.

   22:01, 1.9.2018

   html {
   	transform: scale(2);
   }

   
   Hi,
   in CSS einfügen, in FF und Chrome getestet...
9. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   12:37, 3.9.2018

   @Prinz-und-kloeckner,
   danke für Deine Ausführungen, kannst Du als bekannt voraussetzen.
   Wahrscheinlich hast Du recht, dass es am besten ist, die gesamte CSS zu überarbeiten.
   
   @fits-radio,
   nächste interessante Idee die Du (im Gegensatz zu mir) gefunden hast!
   Hier zwei horizontale Ausschnitte...
   Hier ein Ausschnitt mit der BrowserEinstellung = 110%
   https://www.peterskosmos.de/Stratylon/Browser.jpg
   
   Hier ein Ausschnitt mit der HTML scale Einstellung 1.1
   https://www.peterskosmos.de/Stratylon/Scale1.1.jpg
   
   Der Unterschied zu Browser, ist, dass sich die Schrift nicht im gleichen Prozentsatz mit vergrößert und der Bildhintergrund (Steinwand) verschwindet. Also wirkt sich der Befehl transform: scale(1.1);
   nur auf die innere Box aus, nicht aber auf die gesamte Kontruktion.
   
   @fits-radio,
   
   

   body {
      zoom: 1.1;
   }

   
   Ja, das funktioniert schon fast brauchbar, wenn auch wie bei allen quasi Lösungen nur der innere Rahmen der Konstruktion vergrößert wird.
   
   Bis hierhin erst mal Danke für Deine Anregungen
   
   
   Beitrag zuletzt geändert: 5.9.2018 15:01:46 von mukerbude

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?