CSS Webseite automatisiert im Querformat & Vollbild

[DjangOC]

Hallo Zusammen

Da meine Webseite auf das 16:9 Format ausgelegt ist, respektive auf ein Querformat optimiert, und sich eigentlich nicht primär an Mobile Devices richtet, sondern an Desktop/Laptop, ist es mir nicht der Wert - auch aus Mangel an Zeit - ein reines Mobil Device optimiertes styles zu definieren.

Daher suche ich nach einer Möglichkeit, dass die Webseite auf allen Browsern im Querformat angezeigt wird. Weiss da jemand was? So mit Webkit? Würde eine CSS basierte Lösung klar vorziehen.

Freundliche Grüsse
DjangOC

Edit: Auf Mobile Devices wäre es wünschenswert, wenn die Webseite im Vollbildmodus dargestellt wird, da ich immer alles relativ zum Viewport definiert habe.

 

[BlubbsDE]

AW: Webseite automatisiert im Querformat

Wenn Deine Webseite 16:9 optimiert ist, dann wird sie schon im Querformat dargestellt. Was genau willst Du jetzt bezwecken?

In de Vollbildmodus kannst Du einfach per HTML / Javascript schalten. Und wenn Deine Seite 16:9 optimiert ist, dann sind Dir 60-70% der Benutzer ja von vornherein egal.

 

[DjangOC]

Naja, optimiert bezog sich auf die Darstellung, also Abstände, Grenzdefinitionen, Schriftgrössen etc. sind bei 16:9 optimal.
Aber ich möchte es so haben, dass auf einem 9:16 Geräte, der Viewport im querformat automatisch auf 16:9 geht.
Siehe Scrennshoots. Bitte denn Rest nicht zu ernst nehmen, ist noch im Aufbau, respektive wird gerade erstellt. Nur möchte ich mich jetzt zuerst rasch diesem problem widmen.

 

[Bagbag]

Eventuell funktioniert

screen.orientation.lock("landscape");

 

[DjangOC]

Hi, danke schonmal, aber wie genau verwenden?

 

[BlubbsDE]

Du kannst feststellen, auf welchen Gerät gerendert wird. Das kann man via JS abfragen. Und darauf dann reagieren.

Bringt doch aber alles nichts. Das einzige, was etwas bringt, wenn der User sein Portrait Gerät selber dreht. Wenn Du selber den Landscape Modus auf einem Mobildevice aktivierst, dann sieht der User noch mehr Müll. Wenn er sein Gerät nicht selber um 90 Grad dreht.

 

[Cool Master]

Warum so komplizeirt? Das geht alles per CSS.

1. Nutze dies in deinem CSS:

@media only screen and (max-width : 19.9375em) /* bis 319px with mobile menu */
{

}

@media only screen and (min-width : 20em) and (max-width : 29.9375em) /* 320-479px with mobile menu */
{

}

@media only screen and (min-width : 30em) and (max-width : 40em) /* 480-640px with mobile menu */
{

}

@media only screen and (min-width : 40.0625em) and (max-width : 53.75em) /* 641-860px with mobile menu */
{
}

@media only screen and (min-width : 53.8125em) and (max-width : 64em) /* 861-1024px with mobile menu */
{
}

@media only screen and (min-width : 64.0625em) and (max-width : 71.25em) /* 1025-1140px */
{
}

@media only screen and (min-width : 71.3125em) and (max-width : 80em) /* 1141-1280px */
{
}

@media only screen and (min-width : 80.0625em) and (max-width : 120em) /* 1281px-1920 */
{

}

@media only screen and (min-width : 80.0625em) and (max-width : 120em) /* 1281px-1920 */
{

}

@media only screen and (min-width : 120.0625em) and (max-width : 160em) /* 1921px-2560 */
{

}

Dazu statt px Angaben einfach em oder % nutzen und du hast kein Problem mit Abständen etc.

 

[DjangOC]

@BlubbsDE: Wäre es denn möglich, ein JS zu verwenden, welches die Ausrichtung erkennt, und dann eine Aufforderung statt der Website anzeigt? Also nicht ein Pop-Up oder so, sondern bloss eine Ebene, deren Z-Index dann von z.B. -100 auf 100 geändert wird?

 

[BlubbsDE]

Das ginge, ja. Und recht einfach. Einfach feststellen, mit welchen X/Y Verhältnis der Browser die Seite darstellt und aufgrund dessen diesen Hinweis zeigen. Anhand der Ratio kannst Du ja leicht feststellen, ob der User Portrait oder Landscape nutzt. Aber all das ist doch einen grauenvolle Lösung. Ich würde mir solch eine Seite keine Sekunde ansehen.

Seiten zu erstellen, die auf die Devices eingehen, das ist heute doch so einfach möglich. Mit einem CMS und passenden Template.

 

[Bagbag]

Ich würde mir solch eine Seite keine Sekunde ansehen.

 

[###Zaunpfahl###]

Als ich geb mal ganz einfach meine Meinung hier wieder.

Bevor du deine Zeit mit so einem Blödsinn verschwendest lass es doch gleich.
So wie man erkennt willst du über IT und etc. schreiben. Das freut mich schon mal.

Aber lass so einen Unsinn. Das wird niemand nutzen wollen.
Bring die Seite erst mal so in Ordnung das sie im Desktop Browser (auch hier kann man das Fenster nach belieben in der Größe ändern) einigermaßen gut läuft/aussieht.
Und dann lerne allmählich zu verstehen wie CSS und HTML richtig funktionieren. Dann ist das mit dem Mobil kein Problem mehr.

Einfach mal nach responsive CSS oder Design googlen da sollte es genug geben.


Somit machst du dich nicht besonders authentisch wenn du versuchst eine pseudo responsive zu erstellen.


aja zum testen, rumprobieren, lernen
guck dir mal
https://codepen.io/
an

 

[DjangOC]

@Zaunpfahl, das tut im Desktop eigentlich auch, solange ein 1:1 Verhältnis nicht unterschritten wird.

Zum Inhalt, ja bin viel mit DC dran, und da gibts viel zu dokumentieren.

Aber jetzt sein lassen mag ich nicht, hab schon zuviel reininvestiert. Aber CMS mag ich eigentlich auch nicht verwenden (für dieses Projekt).

Das mit dem CSS wegen der Größe tut auch, alles fein mit vh und vw, ich muss nun aber noch wegen der Schrift und der Silbentrennung schauen.

 

[###Zaunpfahl###]

was ist DC??

Naja musst du wissen.

Und was hat das alles mit CMS zu tun???? ^^
Ah wegen dem einen Kommentar.

CMS hat überhaupt nichts mit dem hier zu tun.
Du kannst jedes Stink normale andere HTML & CSS Template aus dem Internet verwenden das du möchtest dazu brauchst du kein CMS.

Ein einfaches CMS ist nichts anderes als als ein HTML mit Variablen und die Variablen werden dann mit Content ausgetauscht => Content Management System.
Nimm deine HTML tausche den Content mit Variablen/Platzhaltern aus und du hast ein Template....dein eigenes erstellt.

 

[DjangOC]

was ist DC??

Naja musst du wissen.

Und was hat das alles mit CMS zu tun???? ^^
Ah wegen dem einen Kommentar.

CMS hat überhaupt nichts mit dem hier zu tun.
Du kannst jedes Stink normale andere HTML & CSS Template aus dem Internet verwenden das du möchtest dazu brauchst du kein CMS.

Ein einfaches CMS ist nichts anderes als als ein HTML mit Variablen und die Variablen werden dann mit Content ausgetauscht => Content Management System.
Nimm deine HTML tausche den Content mit Variablen/Platzhaltern aus und du hast ein Template....dein eigenes erstellt.

Das hab ich eigentlich auch vor, also einfach so, dass ich das mit der MariaDB bei one.com verwirklichen möchte. Aber bis jetzt hat jeder Container eine ID, welche sich nach seiner Funktion richtet, und dann noch mit einer Ziffer eindeutig macht, so dass ich dann zuweisen kann.