Il mio cliente mi chiede di ridurre le dimensioni del sito Web corrente per i browser desktop del 30%.Meta tag Viewport per browser desktop?
c'è un css o meta tag per farlo come meta tag viewport su un browser mobile?
È possibile guardare il css screenmedia type.
Si tratta di:
Destinato principalmente per schermi di computer di colore.
Si può usare in questo modo:
@media screen {
body { font-size: 70% }
}
V'è anche un tipo di handheld media, in primo luogo:
Destinato a dispositivi palmari (tipicamente piccolo schermo, la larghezza di banda limitata).
Tuttavia, sarà necessario testare i diversi dispositivi e desktop su cui il client si sta concentrando per determinare in che modo l'utilizzo di questi tipi di media influirà sull'esperienza dell'utente.
Hmmm ... So che questa è una vecchia domanda, ma c'è un MOLTO modo migliore per andare su questo: utilizzare la funzione di trasformazione CSS scale() sul tag <html> per ridimensionare TUTTO dentro. Dai un'occhiata a questo jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/
La magia è tutto qui:
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
In realtà risponde alla domanda. Le altre risposte indicano principalmente che questo potrebbe non essere il modo migliore per risolvere il problema. – Kokodoko
Odi è giusto.
@media screen {
body { font-size: 70% }
}
Ma per far sì che funzioni davvero bene, è necessario utilizzare ems anziché px ovunque. Ciò vale per margine e riempimento, nonché per larghezza e altezza di tutti gli elementi.
Un buon modo per farlo è utilizzare SASS. Crea semplicemente la tua funzione sass per convertire le tue misure px in ems al volo. Qualcosa di simile lo farà:
@function em($px, $context: 16, $basesize: 16) {
@return (($px/$basesize)/($context/16))+em;
}
che poi viene utilizzato nel vostro CSS in questo modo:
div { font-size:em(12); width: em(200,12); }
Quindi, se la dimensione del carattere corpo è stato impostato su 100%, quindi la dimensione del carattere sarebbe equivalente a 12px e la larghezza del div sarebbe 200px di larghezza.
Ecco il codice per la scala proporzionale e posizionamento, wnen utilizzando "trasformare: scala"
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale);
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
È possibile attivare il metatag viewport sul desktop con JS .In primo luogo si dovrebbe ricavare l'impostazione (larghezza) dalla meta tag:
var viewportcontent = $("#myviewport").attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
allora avete bisogno di un po 'di JS e la soluzione di Mike per ottenere questa soluzione di lavoro: http://codepen.io/anon/pen/GqoeYJ. Nota che questo esempio impone che la larghezza sia di 1200 pixel, ma che lo initial-scale: 0.7 potrebbe essere implementato nello stesso modo.
Stai cercando una proprietà CSS 'zoom'. Descritto qui, http://stackoverflow.com/a/1156526/368691. – Gajus
È possibile abilitare il tag meta viewport (larghezza) sul desktop con questa soluzione JS: http://stackoverflow.com/questions/37762579/get-meta-viewport-tag-to-work-on-desktop – JoostS