aflösung mittels .php automatisch anpassen lassen

regex · 23 Feb. 2015

hallo,

ich habe ein matrix code in einer .php datei und funktioniert soweit so wie es sein soll

[src=php]<body style=margin:0><canvas id=q /><script>var q=document.getElementById('q'),s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),c=q.getContext("2d"),m=Math;setInterval(function(){c.fillStyle="rgba(0,0,0,0.05)";c.fillRect(0,0,w,h);c.fillStyle="rgba(0,255,0,1)";p=p.map(function(v,i){r=m.random();c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);v+=10; return v>768+r*1e4?0:v})},33)</script>[/src]

leider habe ich jetzt das problem, das beim aufrufen des .php im Browser doch irgendwie nicht die auflösung automatisch anpasst? rechts und unten kanten (siehe bild)

wie kann ich das problem beheben? bzw. wie kann ich es so einstellen das für jede auflösung sich automatisch anpasst und die leeren kanten selber vollständig befüllt?

danke

RedlightX · 23 Feb. 2015

Das sollte mittels css möglich sein

drfuture · 23 Feb. 2015

mit .php hat das erst mal nicht so viel zu tun... - also das was du oben gepostet hast.
Man könnte die Auflösung des Browsers durchaus vorher auslesen und den Sourcecode passend ausgeben das die Auflösung passt - aber dann skaliert das ganze nicht mit wenn der Anwender das Browserfenster ändert. PHP wird ja Serverseitig beim Aufruf der Seite ausgeführt und nur das Ergebnis wird zum Anwender geschickt.

Kannst du mal den ganzen Code deiner Testseite schicken? Theo. wird in dem javascript-code oben schon die Bildschirmbreite / höhe ausgelesen...

Timon3 · 23 Feb. 2015

Einfachste Möglichkeit: Per css beim body den overflow auf hidden stellen. Dann hast du keine Balken mehr.

electric.larry · 24 Feb. 2015

GameChamp98 schrieb:
Einfachste Möglichkeit: Per css beim body den overflow auf hidden stellen. Dann hast du keine Balken mehr.

Ist grade bei Canvas Objekten nicht der optimalste Weg, weil große Canvas Flächen auf älteren Rechnern gerne zu ruckeln beginnen.

Das Problem bei deinem Code ist, dass du window.screen.width als Breite verwendest. Das ist die Breite deines gesamten Bildschirms, nicht nur die des Browserfensters. Gleiches Problem bei der Höhe.

Hier eine Version, die keine Scrollbars zeigen sollte und auch beim Resizen des Screens angepasst wird.
Der Code läuft in aktuellen Firefox und Chrome Versionen. Für ältere Internet Explorer müsstest du das hier machen.

[src=javascript]
<html>
<body style="margin:0;">

<canvas id="q" style="background-color:#000;"/>

<script>

var q = document.getElementById('q'),
s = window.screen,
w = q.width = window.innerWidth,
h = q.height = window.innerHeight,
p = Array(256).join(1).split(''),
c = q.getContext("2d"),
m = Math;

window.onresize = function(event)
{
w = q.width = window.innerWidth;
h = q.height = window.innerHeight;
};

setInterval(function()
{
c.fillStyle="rgba(0,0,0,0.05)";
c.fillRect(0,0,w,h);
c.fillStyle="rgba(0,255,0,1)";
p=p.map(function(v,i)
{
r=m.random();
c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);
v+=10;
return v > 768 + r * 1e4 ? 0 : v;
})
},33)

</script>
</body>
</html>
[/src]

--- [2015-02-24 14:07 CET] Automatisch zusammengeführter Beitrag ---

Wegen deiner Frage zu Fullscreen Modus, schau dir den Code hier einmal an:

http://t3n.de/news/fullscreen-api-funktioniert-363613/

Jester · 24 Feb. 2015

Jop, das Problem ist die Verwendung von screen.width etc. Die Browser speichern leider die innere Client-Größe in unterschiedlichen Objekten im Dokument-Baum. Wenn Du das browserkompatibel machst, klappts.

Quick & dirty:
[src=javascript]function detectScreenSize(){
if(window.innerHeight && window.scrollMaxY){ // Firefox
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
}
else if(document.body.scrollHeight && document.body.offsetHeight){ // all but Explorer Mac
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
else{ // Explorer 6 Strict, Mozilla (not FF) and Safari
screenWidth = document.body.clientWidth;
screenHeight = document.body.clientHeight;
}
}[/src]

electric.larry · 24 Feb. 2015

Hinter dem Link im Posting weiter oben ist eine Kurzvariante von diesem Ansatz, die ich auch ganz cool find:

[src=javascript]
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
[/src]

Larius · 25 Feb. 2015

@electric.larry: document.documentElement.clientWidth wäre dann NULL bzw. das Javascript Equivalent dazu wenn window.innerWidth gesetzt ist, oder?

electric.larry · 25 Feb. 2015

@Larius: Ja, wenn es eine Member Variable nicht gibt, dann bekommst du "undefined" zurück. "null" gibt es auch noch, "NULL" versteht JS aber nicht.

Alle richtigen Browser kennen window.innerWidth und liefern einen Wert zurück. Der Internet Explorer (< Version 9) tut das nicht. Da kennen Versionen <= 8 document.documentElement.clientWidth bzw. document.body.clientWidth. Microsoft war halt nie ein Mitläufer und macht seine eigenen Standards

Um auch mit alten Seiten, die extra für IE optimiert wurden, kompatibel zu sein, unterstützen die meisten anderen Browser dann auch die Microsoft Un-Standards

[src=javascript]var x = undefined || null || "AAA";
//x == "AAA"[/src]

aflösung mittels .php automatisch anpassen lassen

regex

NGBler

RedlightX

Bekannter NGBler

drfuture

Zeitreisender

Timon3

Team ModMii

electric.larry

\''; DROP TABLE user; --

Jester

★★★★☆ (Kasparski)

electric.larry

\''; DROP TABLE user; --

Larius

OutOfOrder

electric.larry

\''; DROP TABLE user; --