Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: viewport

  1. #1
    Youngster
    Registriert seit
    03.11.2013
    Beiträge
    18
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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-Code:
    <meta name="viewport" content="width=1300">
    Vielen Dank für die Hilfe!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: viewport

    Kommt drauf an was für ein Browser auf dem Netbook läuft und ob dieser das unterstützt.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    03.11.2013
    Beiträge
    18
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: viewport

    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!

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: viewport

    Was willst du denn erreichen?

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    03.11.2013
    Beiträge
    18
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: viewport

    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.

  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: viewport

    Zeige uns doch mal die Seite, mir scheint du hast da eher ein anderes Problem.

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    03.11.2013
    Beiträge
    18
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: viewport

    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.
    Geändert von wonder (28.01.2014 um 08:39 Uhr)

  8. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: viewport

    Erst ein mal alle Fehler beseitigen und korrigierte Fassung hochladen.
    --> http://validator.w3.org/unicorn/chec...sk=conformance

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    03.11.2013
    Beiträge
    18
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: viewport

    ok, die sind nun geflickt.

    Trotzdem wird der Viewport für Netbook nicht übernommen. Woran kann das liegen?
    Geändert von wonder (28.01.2014 um 12:44 Uhr)

  10. #10
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: viewport

    Hier die Erklärung dazu --> https://developer.mozilla.org/en-US/...wport_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-Code:
    <table  border="1" cellpadding="2" cellspacing="4" class="links">
    
    sollte so aussehen
    HTML-Code:
    <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-Code:
    <td width="310"  height="30" class="abgerundet"><strong style="padding-left: 5px;">Audi Quatro</strong></td>
    sollte so aussehen
    HTML-Code:
    <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.

  11. Folgende User finden die Antwort von explanator gut:


Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 12.07.2012, 13:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •