Metaetiqueta de Viewport para navegadores de escritorio?

Mi cliente me pide que reduzca el tamaño del sitio web actual para navegadores de escritorio en un 30%.Metaetiqueta de Viewport para navegadores de escritorio?

¿Hay una metaetiqueta o metaetiqueta para hacerlo como la metaetiqueta de la ventana gráfica en un navegador móvil?

Fuente

2011-01-24 Moon

Está buscando una propiedad 'zoom' CSS. Descrito aquí, http://stackoverflow.com/a/1156526/368691. – Gajus

Puede habilitar la etiqueta meta viewport (ancho) en el escritorio con esta solución JS: http://stackoverflow.com/questions/37762579/get-meta-viewport-tag-to-work-on-desktop – JoostS

Puede consultar el css screenmedia type.

Es:

destinado principalmente a las pantallas de ordenador de color.

Se puede utilizar de esta manera:

@media screen { 
    body { font-size: 70% } 
}

También hay un tipo handheld medios de comunicación, principalmente:

previsto para dispositivos de mano (típicamente pequeña pantalla, ancho de banda limitado).

Sin embargo, deberá probar los diferentes dispositivos y escritorios en los que su cliente se está enfocando para determinar cómo afectará el uso de estos tipos de medios a la experiencia del usuario.

Fuente

2011-01-24 21:50:39 Oded

Gracias por su entrada. Intenté en Chrome, es decir, y Firefox. Ninguno de ellos funcionó. Puse tu CSS en mi archivo css. ¿Tengo que hacer algo más? – Moon

@Moon - Acabo de poner una ilustración de cómo usarlo. Aún necesita agregar estilos apropiados. – Oded

Hmmm ... Sé que esta es una vieja pregunta, pero hay una MUCHA mejor manera de hacerlo: use la función de transformación CSS scale() en la etiqueta <html> para escalar TODO dentro. Echa un vistazo a este jsFiddle: http://jsfiddle.net/mike_marcacci/6fMnH/

La magia es todo aquí:

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%; 
}

Fuente

2013-03-11 21:39:27

Esto realmente responde la pregunta. Las otras respuestas señalan principalmente que esta puede no ser la mejor manera de resolver el problema. – Kokodoko

Odas es correcto.

@media screen { 
    body { font-size: 70% } 
}

Pero para que esto realmente funcione bien, debe usar ems en lugar de px en todas partes. Esto se aplica al margen y al relleno, así como al ancho y la altura de todos los elementos.

Una buena forma de hacerlo es usar SASS. Simplemente crea tu propia función sass para convertir tus mediciones de px en ems sobre la marcha. Algo como esto va a hacer:

@function em($px, $context: 16, $basesize: 16) { 
    @return (($px/$basesize)/($context/16))+em; 
}

que luego se utiliza en el CSS de este modo:

div { font-size:em(12); width: em(200,12); }

Por lo tanto, si el tamaño de la fuente del cuerpo se establece en 100%, entonces el tamaño de la fuente sería equivalente a 12px y el ancho del div sería 200px de ancho.

Fuente

2014-01-10 23:11:38 Fotherington

Aquí código de escala proporcional y posicionamiento, wnen el uso de "transformar: escala"

CSS

html,body 
{ 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0;  
} 
html 
{ 
    position:absolute; 
}

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+'%');

Fuente

2014-09-04 06:57:41

Puede activar la etiqueta de visualización meta en el escritorio con JS .En primer lugar debe derivar la configuración (ancho) de la etiqueta meta:

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); 
    } 
}

Entonces se necesita un poco de JS y la solución de Mike para obtener esta solución de trabajo: http://codepen.io/anon/pen/GqoeYJ. Tenga en cuenta que este ejemplo obliga a que el ancho sea de 1200 píxeles, pero initial-scale: 0.7 podría implementarse de la misma manera.

Fuente

2016-06-12 00:16:19 JoostS

Metaetiqueta de Viewport para navegadores de escritorio?

Respuesta

Cuestiones relacionadas