Min-Breite der Inhalte mit viewport meta-tag

Ich brauche, um die min Breite der Inhalte, 480px, so dass jeder die Anzeige auf einem Bildschirm <=, der einen Bildlauf durch, um den Inhalt anzuzeigen. Der Grund dafür ist, dass es unmöglich ist, das layout der Arbeit unter dieser Auflösung.

Hier ist, was ich haben

<meta name="viewport" content="width=device-width,  initial-scale=1, maximum-scale=1, minimum-scale=1">

Ich brauche sowas aber offensichtlich ist dies nicht funktioniert

<meta name="viewport" content="width=device-width,, min-width=480px,  initial-scale=1, maximum-scale=1, minimum-scale=1">
Sind Sie versuchen, die min-Breite der Inhalte, die auf der Seite du meinst? Warum nicht mit einem media-query?
Es ist so einfach wie das festlegen einer min-width auf Ihre <body> element.
Verwandte: stackoverflow.com/questions/15040408/...

InformationsquelleAutor Jacob Windsor | 2012-11-02

  1. 2

    Es klingt wie Sie versuchen, die min Breite des Inhalts auf der Seite, nicht das Ansichtsfenster selbst.Dieser Artikel vielleicht helfen Ihnen.

    Sind Sie wahrscheinlich auf der Suche zu tun:

    @media all and (max-width: 480px) {
    //styles assigned when width is smaller than 480px;

}

    So, in diesem block können Sie geschickt die Stile für die Inhalte auf Bildschirme, die eine Breite von 480px und niedriger.

    Hoffe, dass ist das, was Sie suchen.

    InformationsquelleAutor Rchristiani

  2. 3

    Ist dies eine Lösung für die responsive version einer web-nur für tablet und desktop.

    Dieser code deaktivieren wir die mobile version dynamisch. Auf mobile:

    <!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
    if(screen.width <= 767) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=767');
    }
}
</script>
<!-- End of Meta Responsive -->

    InformationsquelleAutor jalopezsuarez

  3. -2

    Deine zweite Lösung ist in der Tat funktionieren-was Sie vielleicht noch nicht gesehen haben ist, dass Sie 2 Kommas nach width=device-width, das ist wahrscheinlich, warum Sie es nicht haben, zu arbeiten. Ich habe es kopiert und hatte keine Probleme.

    Manchmal frischen Augen tut es allen.

    Bearbeiten :
    Aber, ja, in Ihrem Fall, eine media query ist genau das, was Sie brauchen.

    InformationsquelleAutor davewoodhall

  4. -4
    <script>
        //viewport just for screens under/with 480px width other screen widths show the whole page resized
        if(screen.width <= 480) {
            document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
        //for devices with more and less/equal than 480px width 
        window.onresize = changeViewport;
            function changeViewport(){
                if(screen.width <= 480) {
                    document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
                if(screen.width > 480) {
                    document.getElementById("viewport").setAttribute("content", "");}           
                }
    </script>
    JavaScript ist overkill in diesem Fall.
    warum das runter Stimmen?
    Diese Art von JavaScript-manipulation von meta-funktioniert gut, basierend auf meiner Erfahrung.

    InformationsquelleAutor andre kelling

Schreibe einen Kommentar