Website rekursiv optimieren

[AliManali]

Hi

Kann mir wer vielleicht einen Tipp geben, wie ich die Website möglichst einfach anpassen kann, damit sie auf mobilen Geräten auch vernünftig dargestellt wird? Habe schon per php versucht eine Meldung einzublenden, dass man die Seite doch am PC oder Tablett öffnen solle. Das hat leider nicht funktioniert. Laut meinen Recherchen war der Grund, dass sich heutzutage Browser auf dem Handy nicht mehr unbedingt als mobile Version ausgeben.

Ist zwar alles irgendwie nur über die Jahre zusammengestrickt, aber am PC gefällt mir die Seite ganz gut. 99% der Nutzer sollten eh per PC auf Besuch kommen. Weil man kann das Angebot ja nicht auf mobilen Geräten nutzen.

Ich stehe mit dem Handy auf Kriegsfuss. Keine Ahnung, wie man das richtig bedient. Und ich sehe auch viel zu schlecht, um da was erkennen zu können. Habe ein Pixel 4a, auf dem wird der ganze Header nicht mehr angezeigt. Auf grösseren Handys muss man das Handy horizontal halten, dann kann man das Menu bedienen. Aber auch dann ist die Seite nicht wirklich zu gebrauchen. Auf dem Tablet ist es ganz okay, soweit ich sehen konnte.

Am liebsten wäre mir, surfen die Nutzer per mobile eine Seite an, werden sie einfach darauf hingewiesen, dass sie die Seite mit dem PC öffnen sollen. Oder sie werden zu einer abgespeckten mobile Version umgeleitet, wo einfach paar Infos drin stehen. Wie gesagt, das hat bei mir per php nicht richtig funktioniert. Mich hat es bislang nicht gross gestört, aber es ist halt schon sehr unprofessionell so im Moment.

Es handelt sich um einfache html Seiten. Hatte die zwar mal mit der Endung php versehen, aber die Scripts sind im Moment reines html.

Geht um die Seite:

www.flugsimulatoren.ch

www.flugsimulatoren.ch

Vielleicht hat ja wer eine Idee oder den ein- oder anderen Tipp dazu.

Gruss und danke

 

[King Bill]

Die Seite hat schon responsive Teile drin. Leider ist dein Menüteil im Mobilen ohne Links.

Du hast halt die Breakpoints via css z.b. @Media (min-width: 768px) drin.

Entweder du füllst das hier mit Links auf

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

oder lässt den Button weg und machst ne Auflistung. Kann dir ggf. den css Schnipsel machen.

 

[King Bill]

ist jetzt nicht die schönste art, aber sollte reichen

@media (max-width: 768px) {
.hidden-xs{display: block !important;}  
.navbar-toggle{display: none;}
img{max-width: 100%;}
}

 

[AliManali]

Hmm, ok, tyvm. Sieht schon viel besser aus. Könnte man es noch dahingehend anpassen, dass "mobile" die ganzen Jumper Links unten im Header gar nicht angezeigt werden? Und am PC wie gehabt mit?

 

[AliManali]

King Bill hat das für mich geregelt, die Seite ist jetzt top optimiert für PC und Handy. Nice work, tyvm.