Jeu de tablette de fenêtre d'affichage à 1024px, mobile à l'appareil largeur

Vous pouvez utiliser un fenêtre d'affichage de la balise meta et CSS media queries pour accomplir cette tâche. Dans votre code HTML:

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

Dans votre CSS:

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

JSFiddle ici

OriginalL'auteur nathan

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

Ajuster en conséquence. Essentiellement, ce code constitue un plafond et un plancher pour que "au milieu" de l'appareil (comme une tablette).

Vous pouvez serrer cette fenêtre pour forcer le bureau CSS, ou plus, en faisant quelque chose comme:

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

Côté de faire quelque chose comme cela, vous allez avoir à "renifler" le dispositif, qui rappellent les années 90 (omi -- n'étaient pas ceux les jours?), ou utiliser la fenêtre d'affichage des méta données.

OriginalL'auteur Dawson

Pourriez-vous utiliser Twitter bootstrap échafaudage CSS? Ils ont pré-construit des médias classes que vous pouvez modifier un peu.

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

Je pense que cette partie s'applique plus à ce que vous parlez

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

À ce stade, vous pouvez utiliser des paramètres pour définir le fluide span largeurs de quelque chose comme ci-dessous

Mise en page d'étiquette de Colonne de largeur largeur largeur de Gouttière 
Par défaut 768px et au-dessus de 42px 20px 
Des téléphones tablettes 767px et au-dessous de Liquide de colonnes n'des largeurs fixes

Remarque: etant donné que vous allez à l'aide d'une largeur de colonne fixe la div sera pas mise à l'échelle au-dessus de la correction de la largeur de colonne.

OriginalL'auteur 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 support de table-------------

cette fonction sur le support de javascript tablette

OriginalL'auteur Sok Sopheak