Set tablet-viewport auf 1024px, mobile-to-device-width

Können Sie eine viewport meta-tag und CSS media queries um dies zu erreichen. In deinem HTML:

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

In der CSS:

@media screen and (min-width: 768px) {
    article {
        width: 980px;
        margin: 0 auto;
    }
}​

JSFiddle hier

InformationsquelleAutor nathan

@media only screen and (min-width: 768px) and (max-width: 980px) { ... }

Entsprechend anpassen. Im wesentlichen, dieser code stellt eine Decke und ein Boden-Wert für das "in-the-middle" - Gerät (wie einem tablet).

Können Sie ziehen Sie das Fenster zu zwingen, die desktop CSS, oder die meisten davon, etwas zu tun, wie:

@media only screen and (min-width: 800px) and (max-width: 1024px) { ... }

Abgesehen von etwas wie das zu tun, gehen Sie zu 'schnuppern' das Gerät, das harkens die 90 ' s (imo -- waren das nicht die Tage?), oder verwenden Sie die viewport-meta-Daten.

InformationsquelleAutor Dawson

Konnte Sie mithilfe des Twitter-bootstrap-CSS-Gerüst? Sie haben vorgefertigte Medien-Klassen, können Sie zwicken ein wenig.

http://twitter.github.com/bootstrap/scaffolding.html

Ich denke, dieser Teil am meisten gilt, was Sie reden,

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px)  { ... }

An diesem Punkt können Sie die Einstellungen verwenden, um die Flüssigkeit Spannweiten zu etwas wie unten

Etiketten-Layout Breite Spalte Breite Rinne Breite 
Standard 768px und oben 20px 42px 
Handys, tablets 767px und unten Flüssigkeit Spalten keine festen breiten

Hinweis: Da Sie mit einer festen Spaltenbreite der div wird nicht skaliert, über die Update-Spalte-Breite.

InformationsquelleAutor zmanc

(function() {
window.monaca = window.monaca || {};

var IS_DEV = false;
var d = IS_DEV ? alert : function(line) { console.debug(line); };

/**
 * Check User-Agent
 */
var isAndroid = !!(navigator.userAgent.match(/Android/i));
var isIOS     = !!(navigator.userAgent.match(/iPhone|iPad|iPod/i));

var defaultParams = {
    width : 640,
    onAdjustment : function(scale) { }
};

var merge = function(base, right) {
    var result = {};
    for (var key in base) {
        result[key] = base[key];
        if (key in right) {
            result[key] = right[key];
        }
    }
    return result;
};

var zoom = function(ratio) {
    if (document.body) {
        if ("OTransform" in document.body.style) {
            document.body.style.OTransform = "scale(" + ratio + ")";
            document.body.style.OTransformOrigin = "top left";
            document.body.style.width = Math.round(window.innerWidth / ratio) + "px";
        } else if ("MozTransform" in document.body.style) {
            document.body.style.MozTransform = "scale(" + ratio + ")";
            document.body.style.MozTransformOrigin = "top left";
            document.body.style.width = Math.round(window.innerWidth / ratio) + "px";
        } else {
            document.body.style.zoom = ratio;
        }
    }
};

if (isIOS) {
    monaca.viewport = function(params) {
        d("iOS is detected");
        params = merge(defaultParams, params);
        document.write('<meta name="viewport" content="width=' + params.width + ',user-scalable=no" />');
        monaca.viewport.adjust = function() {};
    };
} else if (isAndroid) {
    monaca.viewport = function(params) {
        d("Android is detected");
        params = merge(defaultParams, params);

        document.write('<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi" />');

        monaca.viewport.adjust = function() {
            var scale = window.innerWidth / params.width;
            monaca.viewport.scale = scale;
            zoom(scale);
            params.onAdjustment(scale);
        };

        var orientationChanged = (function() {
            var wasPortrait = window.innerWidth < window.innerHeight;
            return function() {
                var isPortrait = window.innerWidth < window.innerHeight;
                var result = isPortrait != wasPortrait;
                wasPortrait = isPortrait;
                return result;
            };
        })();

        var aspectRatioChanged = (function() {
            var oldAspect = window.innerWidth / window.innerHeight;
            return function() {
                var aspect = window.innerWidth / window.innerHeight;
                var changed = Math.abs(aspect - oldAspect) > 0.0001;
                oldAspect = aspect;

                d("aspect ratio changed");
                return changed;
            };
        });

        if (params.width !== 'device-width') {
            window.addEventListener("resize", function() {
                var left = orientationChanged();
                var right = aspectRatioChanged();

                if (left || right) {
                    monaca.viewport.adjust();
                }
            }, false);
            document.addEventListener('DOMContentLoaded', function() {
                monaca.viewport.adjust();
            });
        }
    };
} else {
    monaca.viewport = function(params) {
        params = merge(defaultParams, params);
        d("PC browser is detected");

        monaca.viewport.adjust = function() {
            var width = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
            var scale = width / params.width;
            zoom(width / params.width);
            params.onAdjustment(scale);
        };

        if (params.width !== 'device-width') {
            window.addEventListener("resize", function() {
                monaca.viewport.adjust();
            }, false);
            document.addEventListener("DOMContentLoaded", function() {
                monaca.viewport.adjust();
            });
        }
    };
}

monaca.viewport.isAndroid = isAndroid;
monaca.viewport.isIOS     = isIOS;
monaca.viewport.adjust    = function() { };
})();

---------------------------scall Unterstützung tabel-------------

diese Funktion auf javascript-Unterstützung tablet -

InformationsquelleAutor Sok Sopheak