Ansichtsfenster in Medienabfrage ändern

Question

Ich arbeite gerade an einem responsiven Webdesign. Die "Smartphone-Ansicht" ist noch nicht fertig, da mein Kunde etwas mehr Budget bekommen muss.

Deshalb muss ich eine temporäre Ansicht implementieren, die ich mit einem festen Ansichtsfenster realisieren möchte, das nur auf Smartphones aktiviert wird.

stelle ich das Ansichtsfenster auf diese Weise mit:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

ich das Gerät-Breite auf 700 Pixel ändern möchten, wenn die folgende Medienabfrage ausgelöst wird:

tat

@media only screen and (max-width:700px){ 

} 

Der folgende Code funktioniert nicht:

@media only screen and (max-width:700px){ 
    .pagewrapper{ 
     width:700px; 
    } 

    @-ms-viewport{ 
     width:700px; 
    } 

    @-o-viewport { 
     width: 700px; 
    } 

    @viewport { 
     width: 700px; 
    } 

} 

Kennen Sie andere Lösungen, um dies zu tun? Vielleicht mit JavaScript/jQuery?

Answer 1

Das ist meine Lösung, die fantastisch funktioniert. Auf diese Weise läuft das Skript nur einmal und wird ausgeführt, bevor das Dokument fertig ist. Auch no-js wird unterstützt. Danke für Ihre Hilfe.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript"> 
    if($(window).width() < 765) 
    { 
     x=1; 
     if(x==1) 
     { 
      $('meta[name=viewport]').remove(); 
      $('head').append('<meta name="viewport" content="width=765px, initial-scale=1.0">'); 
      x=0; 
     }; 
    }; 
</script> 

Answer 2

@media only screen and (min-width:700px){ 

} 

Sie können Ihre CSS nur mit dieser Art von Medienabfrage ändern. Wenn dies min-width:700px getroffen wird, schreiben Sie Ihren css w.r.t dies. Und Ihre Containerbreite zB ändern <div class="pagewrapper"></div>

Nach Meta Tag ist perfekt:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

Wenn Sie nur Geräte-Targeting sind, ich glaube, Sie stattdessen max-device-width könnten versuchen, von max-width oder min-width.

Answer 4

if ($('body').width() < 700){ 
     $('head').append('<meta name="viewport" content="width=700, initial-scale=1.0">'); 
} 
else{ 
     $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">'); 
} 

Answer 5

Die akzeptierte Antwort ist korrekt, aber wenn Sie jQuery verwenden und jQuery muss bereit sein. Bei langsamen Verbindungen tritt ein Problem mit diesem Code auf, sodass Sie möglicherweise '$' undefined Fehler erhalten.

Deshalb habe ich rein JavaScript in diesem Fall bevorzugen:

<meta name="viewport" id="viewport" content="width=device-width; initial-scale=1"> 
<script type="text/javascript"> 
    (function setViewPort() { 

     if (screen.width < 640 && (window.orientation == 0 || window.orientation == 180)) { 
     document.getElementById("viewport").setAttribute("content", "width=480, initial-scale=0.68"); 
     //alert('480 @ 0.68, landscape'); 
     } else if (screen.width < 640) { 
     // document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1"); 
     // disabled, since its the same as the default. if this one is different, uncomment line above 
     //alert('device-width @ 1, landscape'); 
     } else if (screen.width >= 640) { 
     document.getElementById("viewport").setAttribute("content", "width=640; initial-scale=0.5"); 
     //alert('640, high res phones'); 
     } 
    })(); 
</script> 

In meinem Fall habe ich 480px für Portrait mit 0,68 Zoom eingestellt, 320px mit 1-Zoom für Landschaft, so dass die ppl größere Text sehen und (weil diese ist eine nur mobile Seite) wenn screen.width höher als 640 (wie auf meinem Android 5 "Handy mit 1900x1080 Bildschirmgröße) zu 640px mit 0,5 Zoom (da die Breite immer bei 320px bleibt).

Grüße, Max