HTML. Machen Sie Website fit für andere Geräte und Bildschirme?

Question

Ich habe vor kurzem mit einer Website "erledigt" (http://calcultr.comxa.com/). Es sieht auf meinem Bildschirm gut aus, aber auf dem Bildschirm meiner Freunde passt es nicht auf den Bildschirm. Das gleiche gilt für meine anderen Geräte. Ich habe dies dem Leiter Tag hinzugefügt:

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

ich viele Leute gehört haben, sagen „die das Problem beheben“, aber es hat nicht, ich weiß nicht einmal, was es bedeutet. Waren sie gelogen? Wie würde ich meine Website an jedes Gerät und Bildschirm anpassen?

Vielen Dank. :)

Answer 1

Ihre Website wird nicht richtig auf Ihrem Computer angezeigt, weil er/sie eine andere Auflösung hat. Das ist der komplizierte Teil des Front-End-Designs. Sie haben Ihre Website für EINE Auflösung/Gerät/Bildschirm entworfen, jetzt müssen Sie es für den Rest erledigen, oder zumindest eine Lösung finden, die für die meisten Geräte und Bildschirme funktioniert.

Dies sind die Optionen, die Sie haben:

1. Entwurf mit Prozentsätzen in CSS, so dass Ihre Seite auf einen bestimmten Prozentsatz des Bildschirms des Benutzers anpassen. CSS - Percentages or Pixels?

2. Verwenden Sie Medienabfragen, um die Pixelgröße an die Benutzer anzupassen; " https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

Wie bereits erwähnt,

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

... wurde an die Spitze des Quellcodes nicht hinzugefügt. Und wenn Sie versuchen, es reaktionsfähig zu machen, möchten Sie möglicherweise CSS-Medienabfragen hinzufügen.

Zum Beispiel

@media screen and (min-width: 480px) { 
    body { 
     background-color: blue; 
     //whatever styling... 
    } 
} 

Answer 3

Versuche bei Bootstrap suchen. Es ist wirklich einfach und Sie können auf alle Geräte reagieren, indem Sie Ihren IDs und Klassen ein paar Namen hinzufügen :) Hier ist die link, hoffe das hilft!

Answer 4

Versuchen Sie, wie Bootstrap mit Rahmenarbeit, Stiftung, etc .. Wenn Sie für Front-End Cross-Browser-Kompatibilität wollen Designs