1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

ViewPort für alle (mobile) Systeme richtig einstellen

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von baeri, 27. Januar 2016.

  1. baeri

    baeri Erfahrenes Mitglied

    Hi Leute,

    ich habe eine kleine Seite gemacht, die man Mobil abrufen können soll...

    da ich einige Elemente verbaut habe, deren Proportionen immer gleich sein sollen habe ich im "body" eine Feste breite:
    Code (Text):
    1. body{ width: 600px;  }
    2. .qdr{ width: 300px; height: 300px; }
    nun, man kann meine Seite auf allen Browsern sehen und sie sieht auch "gut" aus... aber die Scalierung passt nicht.

    Code (Text):
    1. <meta name="viewport" content="width=600px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    so schaut unter Windows 10 Mobile (ehemals WindowsPhone) alles gut aus. Unter Android (selbe Displayauflösung hingegen sieht man gerade mal ein viertel des bereiches).

    Code (Text):
    1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    machts für Windows 10 Mobile schlecht und unter Android passts auch noch nicht...

    was man so online lesen kann ist der viewport mit device-width vermutlich die richtige Richtung. Also muss ich im CSS was verändern, kann mir jemand Tipps geben?

    Mit Javascript nachscalieren möchte ich nicht (zumindest wäre das mein letzter Ausweg). Den Code so anzupassen dass die Formen Prozentual abgeändert werden, habe ich versucht - funktioniert aber nicht richtig
    weil ich z.B. "quadratische" Flächen haben muss... und während ich mit einer festen "body"-breite mit 300x300 ein Quadrat mit halber Fenster breite hin bekomme (auch etliche Abstände und Zeilenhöhen sind hier verbaut). Ist bei einem relativen "body", zwar mit 50% in der breite geholfen, in der höhe steh ich aber dumm da :(

    evtl. kann man mir jemand weiterhelfen!
    Vielen Dank
    baer
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Ich empfehle Dir, Dich in diesem Punkt mit CSS Media Queries näher zu beschäftigen, um differenziertere CSS-Regelungen festlegen zu können.
     
    iCup gefällt das.
  3. baeri

    baeri Erfahrenes Mitglied

    naja, ne 2. CSS Regelung bekomme ich schon hin (auch wenn ichs schade finde dass man hier nicht einfach mal Standards machen kann)...

    aber mein Problem ist, für Android bekomm ichs ja garnicht hin, dass es sich entsprechend anpasst...
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Um welches Smartphone-Modell und Version handelt es sich überhaupt beim OS "Android"?

    Ist die Seite für Dritte zugänglich, um einen Blick darauf werfen zu können?

    EDIT: Optional kannst Du mir den Link per PN nennen.
     
    Zuletzt bearbeitet: 27. Januar 2016
    iCup gefällt das.
  5. baeri

    baeri Erfahrenes Mitglied

    nein, das Projekt läuft in meinem Smarthome und ist momentan noch OFFLINE (also nur im lokalem Netzwerk)... eine Spezifizierung vom Andoid will ich eigentlich nicht, da es "überall" laufen soll!

    aber Script Auszüge wäre kein Problem

    index
    Code (Text):
    1. <!DOCTYPE html>
    2.  
    3. <html lang="de">
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <meta name="viewport" content="width=600px, initial-scale=1.0, user-scalable=no">
    7.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    8.         <title>Smarthome</title>
    9.        
    10.         <script src="jquery-2.2.0.min.js"></script>
    11.         <link rel="stylesheet" href="roStyle.css" />
    12.     </head>
    13.    
    14.     <body oncontextmenu="return false">  
    15.  
    16.    
    17. <ul id="home">
    18.    
    19. </ul>
    Code (Text):
    1. @viewport{
    2.         zoom: 1.0;
    3.         width:extend-to-zoom 100%;
    4.     }
    5.  
    6.     @-ms-viewport{
    7.         width:605px;
    8.         zoom: 1.0;
    9.     }
    10.  
    11.     body, html {
    12.         background: rgb(10,10,10);
    13.         background-size: 600px;
    14.         width: 600px;
    15.         margin: 10;
    16.         padding: 0;
    17.         color: rgb(180,180,180);
    18.         -webkit-touch-callout: none;
    19.         -webkit-user-select: none;
    20.         -khtml-user-select: none;
    21.         -moz-user-select: none;
    22.         -ms-user-select: none;
    23.         user-select: none;
    24.         font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    25.     }
    26.  
    27.     ul{
    28.         width: 590px;
    29.         list-style: none;
    30.         padding: 0;
    31.         text-align: center;
    32.         overflow: auto;
    33.     }
    auch das hier zoomt schon nicht richtig
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Bitte mit dem nicht näher spezifizierten Android-Smartphone testen:

    http://andreasbovens.github.io/understanding-viewport/
    -> http://andreasbovens.github.io/understanding-viewport/meta-width640.html
    -> http://andreasbovens.github.io/understanding-viewport/meta-widthdevicewidth-div600.html
    -> http://andreasbovens.github.io/unde...ta-widthdevicewidth-initialscale1-div600.html

    Mit
    Code (HTML5):
    1. <meta name="viewport" content="width=600"><!-- Ohne px-Angabe, die gilt automatisch! -->
    passt sich auch Deine Seite mit den absoluten CSS-Dimensionen auf meinem Android-Display an.
    Code (HTML5):
    1. user-scalable=no
    Zeigt bei mir eh keine Wirkung.
     
    Zuletzt bearbeitet: 27. Januar 2016
    iCup gefällt das.
  7. Ethan L.

    Ethan L. Grünschnabel

    such mal nach @media-Regeln da findest du bestimmt deine Antwort mit Mobile.
     
  8. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Siehe Post #2 :-]
     
    iCup gefällt das.
  9. baeri

    baeri Erfahrenes Mitglied

    schonmal aufs datum geschaut?
     
Die Seite wird geladen...