viewport

    Hallo zusammen.
    Ich habe einen Viewport eingebaut, der beim iPad und iPhone auch funktioniert. Was muss ich aber machen, dass die Website auch für ein Netbook auf die richtige Grösse verkleinert wird?

    Mein Codeausschnitt:

    HTML
    <meta name="viewport" content="width=1300">

    Vielen Dank für die Hilfe!

    Browser ist Safari und Chrome. Geht bei beiden nicht. Wie muss ich den viewport anpassen, damit sie das auch übernehmen?
    Vor allem was muss ich für Internet Explorer einstellen?
    Vielen Dank im Voraus!

    Ich möchte, dass die Grösse der Tabelle proprotional auf den Bildschirm passt, also zusammengedrückt wird. So wie das bei iPad und iPhone geschieht.

    Hier die Seite: Der äussere Rahmen passt sich bei iPad und iPhone schön auf die richtige Grösse an, nicht aber bei einem Netbook.

    Einmal editiert, zuletzt von wonder (28. Januar 2014 um 07:39)

    Hier die Erklärung dazu --> https://developer.mozilla.org/en-US/docs/Moz…ewport_meta_tag

    Kurz und Knapp, der Tag ist nur für Mobile Geräte gedacht,

    Wenn du die Tabelle proportional zu der Bildschirmgrösse oder richtiger Viewport haben willst, dann musst du flexible Einheiten wie % nehmen anstatt fester Werte.

    Über media-queries in der CSS-Datei kannst du dann auch das Verhalten ggü. kleiner Viewports wie sie auf Smartphones vorkommen festlegen.
    Mit initial-scale=1 legt du dann das zoomverhalten des mobilen Gerätes fest.

    Informiere dich auch über responsive design in diesem Zusammenhang.

    Konkret zu deinem CSS:

    • Nimm bei body die width:680px raus.
    • Bei table setzt du with: 80'% oder ein Wert deiner Wahl



    das wars es schon in groben Zügen um die gewünschte Anpassung zu erhalten.

    Weitere Tipps:


    • Verwende den Doctype von HTML5.
    • optimale Fontgrösse ist immer 1em verwende nicht px oder eine andere Einheit.
    • Schriftgrössen werden vererbt, dazu musst du diese nur einmal angeben im body, das reicht.
    • Du hast 4 CSS-Dateien, fasse diese zusammen und mache eine daraus, oder willst du dich totsuchen, ausserdem lädt die Seite dann schneller. Teste es mit https://developers.google.com/speed/pagespeed/insights/



    Das hier

    HTML
    <table  border="1" cellpadding="2" cellspacing="4" class="links">


    sollte so aussehen

    HTML
    <table id="automarken"


    Tabellen dürfen ruhig eine aussagekräftige id erhalten, Tabellen kommen ja nicht so oft vor, da ist es richtig eine id statt class zu verwenden. Lerne den Unterschied.
    Das hat dann auch gleich weitere Vorteile wie du hier sehen kannst.

    HTML
    <td width="310"  height="30" class="abgerundet"><strong style="padding-left: 5px;">Audi Quatro</strong></td>


    sollte so aussehen

    HTML
    <td>Audi Quatro</td>


    Der Rest gehört ins CSS und kann im Zusammenhang mit obiger Regel so angesprochen werden:

    Code
    table#automarken td {
    padding-left: 5px; 
    font-weight: bold;
    border-radius: 7px;
    border: 1px solid black;
}


    Das gleiche Prinzip lässt sich auch auf die Tabellenzeile TR oder den ganzen Body einer Tabelle mit tbody anwenden.

    Lerne die Selektoren von CSS kennen und wie man sie richtig einsetzt, das erspart viel Mühe und zusätzliche Screiberei, so wie du es jetzt angewendet hast.