Höhere Auflösungen für Homepagedesign simulieren, als das der Monitor kann

[LeanderAT]

Hi!

Gibt es eine Möglichkeit, das Homepagedesign zu testen bzw. zu entwickeln für eine Auflösung, die der eigene Monitor nicht beherrscht?

Sprich, ich habe einen Acer Predator mit einer Auflösung von 1920x1080. Kann ich mir ansehen, wie meine Seite mit UHD aussieht, obwohl ich den Monitor nicht darauf einstellen kann?

http://responsivetesttool.com kann zwar die Auflösung ändern, ich kann also UHD einstellen, aber dann habe ich Scollbalken. Ich bräuchte ein Tool, das alles trotzdem auf Bildschirmgröße anzeigen kann...quasi trotzdem auf 1920x1080 reinpassen, aber das Verhältnis der Seite anzeigen, wie es auf UHD aussieht. Ich hoffe, ihr versteht, was ich meine.

So ala "Zeige mir eine Leinwand von 10x8 Meter in einem 8x6 Meter-Fenster an", wobei ich aber trotzdem schauen kann, wie die Leinwand hinsichtlich Logo-Platzierung, Verhältnis Menü und Inhaltsbereich usw. aussieht.

 

[conglom-o]

Mal probiert die Ansicht mit den Scrollbalken kleiner zu zoomen?

 

[floTTes]

Bei nVidia kann man das mit DSR über die nVidia-Systemsteuerung machen. Für AMD gibt es auch eine Lösung. Musst du mal googlen.

 

[liose]

Einfach F12 (Entwicklereinstellungen) im Chrome, Edge oder Firefox verwenden. Dann auf Gerätesimulation, gewünschte Auflösung eingeben und Zoom auf die gewünschte Größe stellen.

 

[sethdiabolos]

Man kann dann dennoch nur grob erkennen, wie die Seite später ausschaut und vieles versackt einfach in der niedrigen Pixeldichte. Filigrane Arbeiten kannst Du damit vergessen. Da hilft nur ein besserer Monitor.

 

[TP555]

Hi

Welche Grafikkarte, oder CPU für Onboard Grafik nutzt du ?

Mfg.

 

[Tzk]

Filigrane Arbeiten kannst Du damit vergessen.

Ja, aber um grundsätzlich zu sehen ob das Seitenlayout passt und sich nix zerschiesst reicht es...

 

[netzgestaltung]

Einfach im Firefox mit Strg+Shift+M auf Bildschirm-Test Modus stellen. Da lässt sich auch die Pixeldichte und die Auflösung wählen.

 

[conglom-o]

Dann hat er allerdings wieder die Scrollbalken. Er will ja mehr Pixel darstellen als physikalisch vorhanden und das ohne Scrollen. Wird dann halt matschig...

 

[netzgestaltung]

Er will ja nur wissen, wie es aussieht? Ansonsten halt Testgeräte mit entsprechenden Abmessungen anschaffen.

 

[conglom-o]

Das mit den Scrollbalken hatte er allerdings schon direkt im Eröffnungspost erwähnt - da hilft Dein Tipp ihm nicht weiter .

 

[netzgestaltung]

Der FF macht ein Fenster im Browser-Fenster. Das Browser-Fenster hat Scrollbalken in dem das kleinere Fenster verschoben wird. Dieses hat aber keine Scrollbalken, außer es ist noch was am CSS zu basteln. Daher ist es mein Go-To Tool zum Bildschirmgrößen Testen.

Mit dabei ist ein Screenshot-Tool. Damit einen Screenshot machen und zb in Gimp öffnen und zoomen.

 

[LeanderAT]

Danke für eure Antworten. Ich hab einen Acer Predator XB253Q und eine MSI GeForce RTX 2070 Super Gaming Trio 8 GB.

Ich kann im Windows für den Monitor eine höhere Auflösung wählen, aber will nichts zerschießen...zumal beim Eintrag meines Monitors auf der Seite von Acer steht, dass die maximale Auflösung 1920x1080 ist:

https://www.acer.com/at-de/predator/monitors/xb3/pdp/UM.KX3EE.W01

 

[Midnight Sun]

Gibt es eine Möglichkeit, das Homepagedesign zu testen bzw. zu entwickeln für eine Auflösung, die der eigene Monitor nicht beherrscht?

Ja! Durch zB eine zusätzliche Person die sich das anschaut und dir eine Rückmeldung gibt, dir Screenshots zukommen lässt, ihr beide gemeinsam und gleichzeitig daran arbeitet oder die anderer Person dir einfach nur seinen Bildschirm zeigt.

 

[LeanderAT]

Ich hab es mit dem Firefox-Tool probiert...geht gut...so kann ich genau anpassen, wo welcher Text angezeigt wird. Heute war ich bei einem Freund, der eine Auflösung von 3840x2160 hat...sieht ok aus, obwohl meine Seite auch als Version 1920x1080 gut aussieht, zumal viele Seiten auch 2024 nur mittig Content haben, links und rechts viel frei, z.B. CNN, ORF usw.

Ich habe eigentlich wenig Nutzen, eine größere Seite anzubieten...das HIntergrundbild ist größer, aber die Fotos gleich, weil ich sie nur mit Höhe 880px hochgeladen habe, um Daten zu sparen....Text habe ich zudem nicht viel, weil es viele Unterseiten sind...da bringt ein "Waagrecht ist mehr Platz" wenig, zumal die Gedichte auch so von den Zeilen sind, dass sie auch auf ein Handydisplay passen.

www.seelenpuls.at ist die Live-Seite für max. 1920x1080.
www.seelenpuls.at/test ist die Test-Seite mit zwei weiteren Größen über 1920x1080...

Bei 1920x1080 habe ich für Text, der nicht ins Content-Fenster passt, einen Button "Scrolle hoch zum Anfang"...der wird fix angezeigt auf der Live-Seite...da er fix angezeigt wird, wird er aber auch auf der Testseite angezeigt für 3840x2160, obwohl im Content-Fenster genug Platz frei ist und man NICHT scrollen muss.
Da wird also der Pfeil nach oben als Icon angezeigt, obwohl eh der gesamte Texte draufpasst...und dann keine Funktion hat.

Gibt es eine Möglichkeit, dass ich den Link mit "Scrolle hoch zum Anfang des Contents" nur anzeige, wenn der Content NICHT auf eine Seite passt und man also scrollen kann?

Ist so gemacht:
<div id="content"><a name="gototop"></a> blabababnla
und am Ende des Contents
<a href="#gototop" title="Start of page"> blababla

Die Seite selber ist in der Stylesheet zusammengebastelt mit verschiedenen Bereichen...und
Abfragen der Auflösung ala @Media only screen and (min-width : 1437px) and (min-height : 880px)
.....

Darunter wo was wie angezeigt wird....und der Inhalt ist jeweils in einer PHP, die die .css lädt...es wird aber immer die selbe PHP als Inhalt geladen, unabhängig von der Fenstergröße.

Ist es technisch möglich, ein "Scrollhoch-Icon" nur dann anzuzeigen, wenn so und so viel Platz ist?

Ich könnte in der Stylesheet nur das Icon 1x1px groß machen, damit man es nicht sieht und so ausblendet, wenn genug Platz ist größer als 1920x1080...

Wie man einen Div-Container je nach Auflösung ein- oder ausblenden kann ohne Javascript weiß ich leider nicht. Geht das?

Ergänzung (13. Januar 2024)

Hier z.B. die CSS für die größte Auflösung. Sie ist dann aber viel größer, sodass im Content ein Icon zum Hochscrollen zum Seitenanfang (siehe Bilder) NICHT mehr angezeigt werden soll, da genug Platz ist und alles auf eine Seite passt. Die beiden Icons sollen bei einer Auflösung bis 1920x1080 angezeigt werden, aber darüber nicht. Die Icons selber sind in der PHP mit dem Inhalt drinnen, also Text blabla, darunter das Icon als Grafik mit ahref = gototop und ganz oben im Content a name gototop.
Ich möchte aber nicht je nach Auflösung unterschiedliche Versionen der PHP machen.

Hier die CSS für 3840x2160, wo dann das Design 2874x1761 ist:

/* Large screens larger than 1920x1080 XXL----------- */
@Media only screen and (min-width : 2874px) and (min-height : 1761px) {
* { padding: 0; margin: 0; }

body
{
font-family: Verdana, Arial, sans-serif;
color: #000000;
background-color: #F2F2F2;
scrollbar-face-color: #003300;
scrollbar-highlight-color: #006600;
scrollbar-3dlight-color: #006600;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #000000;
}

#center {

position: absolute;
top: 50%;
left: 50%;
width: 2874px;
height: 1761px;
margin-left: -1437px;
margin-top: -880px;
background: #303030;
box-sizing: border-box;
background-image: url(img/bg_con_res1xxl.jpg);
background-repeat: no-repeat;
border: 4px solid #365200;
}

ul {
display: flex;
flex-direction: column;
justify-content: center;
align-item: center;
list-style-type: none;
margin: 0;
padding: 0;
}

#navi
{
position: absolute;
left: 25px;
top: 889px;
height: 260px;
width: 180px;
overflow: auto;
font-size: 19px;
line-height: 30px;

}

#navi A
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#navi A:VISITED
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#navi A:ACTIVE
{
color: #ffffff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

#navi A:HOVER
{
color: #ffffff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

#navi HR
{
color: #808080;
background-color: transparent;
text-decoration: none;
}

#content
{
left: 480px;
top: 708px;
width: 2170px;
height: 979px;
position: absolute;
padding: 0px 204px 0px 0px;
color: #000000;
font-size: 18px;
overflow: auto;
}

#version
{
position: absolute;
left: 25px;
top: 1630px;
width: 90px;
height: 20px;
font-size: 14px;
font-family: Verdana, Arial, sans-serif;
color: #ffffff;
}

#language
{
position: absolute;
left: 25px;
top: 1724px;
width: 80px;
height: 30px;
font-size: 14px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#links
{
position: absolute;
left: 25px;
top: 1399px;
width: 80px;
height: 94px;
font-size: 14px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#zitat
{
left: 0px;
top: 857px;
width: 1432px;
height: 20px;
position: absolute;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#footer
{
position: absolute;
right: 15px;
top: 1724px;
width: 60px;
height: 30px;
font-size: 14px;
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
}


p
{
margin-top: 18px;
}

small
{
font-size: 13px;
}

small2
{
font-size: 15px;
}


h1
{
color: #ffffff;
font-size: 18px;
text-decoration: underline overline;
font-weight: bold;
}

h2
{
color: #ffffff;
font-weight: bold;
font-size: 18px;
}

h2 span
{
color: #000000;
}

.menuactive
{
color: #ffffff;
font-size: 20px;
text-decoration: underline overline;
font-weight: bold;
}

img#inclinks {
width: 34px;
height: 34px;
}

img#toparrow {
width: 34px;
height: 34px;
}

img#EN_arrow {
width: 34px;
height: 34px;
}

.menuepunkt
{
color: #006600;
font-size: 18px;
font-weight: bold;
margin-top: 0px;
}

.fbtext
{
color: #400080;
font-size: 14px;
margin-top: 0px;
}

.greenerror
{
color: #990000;
margin-top: 0px;
}

a.class1:link
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:visited
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:hover
{
color: #006600;
font-weight: normal;
text-decoration: underline;
}

a.class2:link
{
color: #006600;
text-decoration: none;
}

a.class2:visited
{
color: #006600;
text-decoration: none;
}

a.class2:hover
{
color: #006600;
text-decoration: underline;
}

a.class3:link
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:visited
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:hover
{
color: #669900;
text-decoration: underline overline;
}

a.class4:link
{
color: #ffffff;
text-decoration: none;
}

a.class4:visited
{
color: #ffffff;
text-decoration: none;
}

a.class4:hover
{
color: #ffffff;
font-weight: bold;
}

/** LIGHTBOX MARKUP **/

.lightbox {
/** Default lightbox to hidden */
margin-left: -4002px;

/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,.78);
transition: all .6s;
}

.lightbox img {
/** Pad the lightbox image */
max-width: 1173px;
max-height: 880px;
margin-top: 24px;
transition: all .7s;
}

.lightbox:target {
/** Remove default browser outline */
outline: none;

/** Unhide lightbox **/
margin-left: 0;
transition: all .8s;
}

.thumb {
max-width: 110px;
max-height: 80px;
}
}

 

[conglom-o]

Ich würde da eher mit em und rem arbeiten anstatt mit px.

 

[Janush]

Und du hast die Seite selber programmiert, weil du bock auf sowas hast und das neben deiner künstlerischen Tätigkeit ein weiteres Hobby von dir ist? Oder warum hast du nicht einfach WordPress genommen?

 

[netzgestaltung]

Wenn man selbst am Theme werkelt, kannst du die gleichen Aufgaben auch mit WordPress haben.

 

[LeanderAT]

Und du hast die Seite selber programmiert, weil du bock auf sowas hast und das neben deiner künstlerischen Tätigkeit ein weiteres Hobby von dir ist? Oder warum hast du nicht einfach WordPress genommen?

Weil ich keine Werbung "Mit xy erstellt" haben will und den Look, den ich will, sonst nicht hinbekomme.

Ist im Prinzip seit 1998 viel Getippe und copy and paste und trial and error, ohne viel zu verstehen

 

[Midnight Sun]

Wenn man selbst am Theme werkelt, kannst du die gleichen Aufgaben auch mit WordPress haben.

WordPress kann im Hintergrund laufen und im Quelltext sieht man nichts davon.

Wenn dass das ist was du meist, dann kannst du dem TE das grob erklären.
Bin wohl noch fit was WP angeht, aber schon länger nicht auf dem aktuellsten Stand.