2010-10-26 12 views
22

Necesito poner en mi sitio div que es exactamente 25 cm de ancho (10 pulgadas) en cada pantalla. Cómo puedo hacerlo ?ancho Div en cm (pulgada)

+1

¿Por motivos de impresión o en la pantalla? Tenga en cuenta que –

+1

25cm <> 10in mientras que 25.40 es más cercano (1cm = .3907008in redondeada) –

+0

Me intriga: ¿por qué usted realmente quiere hacer esto? ¿Estás tratando de imitar, por ejemplo, una pantalla de "tamaño real" de un objeto de la vida real? –

Respuesta

19

Usted puede simplemente utilizar la unidad cm en CSS:

#mydiv { width: 25cm; } 

Tenga en cuenta que, como otros, ha señalado, el resultado sigue dependiendo de la lectura correcta del tamaño del monitor por el sistema operativo.

Véase el spec para más información.

+6

Simplemente probé esto; el resultado no es ni cerca del número indicado. Además, ** unidad ** no ** sufijo **. –

+0

Bueno, funciona en mi portátil 3yo asus para el mm. No tengo estadísticas listas, pero supongo que las computadoras portátiles generalmente tendrán más posibilidades de éxito. – Tomas

+0

Todavía no creo que los navegadores lo rendericen correctamente, pero vale la pena intentarlo. Pero tendrá que probarlo con una variedad de combinaciones de plataforma/monitor antes de poder estar seguro de que está funcionando correctamente. – Spudley

11

¿Cómo puedo hacerlo?

No puede. Actualización: aparentemente, puede hacerlo en muchos sistemas modernos: vea la respuesta de @Tomas. Sin embargo, parece no ser siempre completamente confiable.

Respuesta anterior: No puede. Los monitores muestran diferentes números de píxeles. El tamaño del píxel varía mucho de un monitor a otro.

Existen formas de interpolar el tamaño del píxel si conoce el tamaño del monitor. Esta información a veces está disponible para el sistema operativo; sin embargo, es imposible que un sitio web consiga esta información.

El único camino a seguir sería hacer que el usuario realice una calibración. Por ejemplo, solicite al usuario que sostenga un trozo de papel A4 en el monitor y use una regla que se pueda arrastrar para determinar el área que cubre. Usando esa información, puede calcular cuántos píxeles necesitará para mostrar 25 centímetros.

Actualización: @Tomas afirma en su respuesta que el uso de valores CSS cm funciona en la pantalla.

Esta es, de hecho cierto en mi Windows 7 y 23" Plug & Juego Monitor TFT (1920x1080 píxeles): (!) 21cm traduce perfectamente al lado corto de una hoja de papel A4 en Chrome 7, IE6, IE7, Firefox 3.6.

No parece ser completamente confiable, aunque: @Yi Jiang no puede hacer que funcione en una TFT usando Ubuntu Linux, también, los monitores más antiguos pueden no enviar a través de su información de tamaño para que ' ll ser imposible para el sistema operativo para determinar un tamaño correcto.

Aquí es un simple JSFiddle para la prueba.

+0

No estoy de acuerdo.En la mayoría de los sistemas, el sistema operativo puede detectar correctamente el tamaño del monitor y se pueden usar valores absolutos de CSS. – Tomas

+1

@Tomas No confío en que los navegadores traduzcan correctamente los valores de 'cm', incluso si pudieran. Pero punto justo, lo probaré –

+1

@Tomas: "el tamaño del monitor se puede detectar" ... en píxeles, que no tienen una asignación directa a las unidades de ancho físico. Una pantalla de 17 "puede mostrar 640x480 y 1024x768, ¿cómo se obtiene el tamaño físico cuando se ejecuta el código en una página web? (Pista: no) – Piskvor

2

Necesitará obtener la resolución de la pantalla y el dot pitch del monitor para poder calcular esto.

Dados estos dos valores, podrá calcular el número de píxeles que necesita.

Sin embargo, no puede obtener esta información de un sitio web.

+0

No se puede obtener la información de un sitio web, en cualquier caso. En un programa de Windows, podría ser posible ible (Windows 7 parece saber qué tan grande es mi pantalla). –

+0

@Pekka: Sí, una aplicación de escritorio podría obtener esa información, ya que se puede comunicar directamente con el monitor y la tarjeta gráfica. Pero el navegador no puede, y eso es lo que hizo la pregunta. – Spudley

+0

@Spudley Relax. No estaba criticando la respuesta de Chris, solo agregué una nota al margen –

0

creo que el motor de la disposición tendría que saber tres cosas para que esto sea posible:

  1. Resolución de pantalla
  2. DPI
  3. tamaño del monitor física

En lo que a mí consciente, no conoce los tres.

+2

No dos de los anteriores son suficientes para calcular el tercero. – Tomas

+0

DPI es puntos por pulgada. 1/DPI es pulgadas por punto. Eso solo es suficiente para calcular. Por lo tanto, necesita 2. o 1. y 3. –

+1

y me equivoqué: los monitores más nuevos informan su DPI al SO, y los navegadores realmente lo detectan. http://en.wikipedia.org/wiki/Extended_display_identification_data – Piskvor

1

Dado que declara que es <div> en un sitio, sabemos que se encuentra en un entorno de navegador web.

Lamentablemente, el navegador web no tiene forma de averiguar el DPI de la pantalla.Puede averiguar cuál es la resolución de la pantalla, para saber si el usuario tiene 1024x760 o lo que sea, pero nunca sabrá si esos 1024x768 píxeles se muestran en una pantalla de tamaño iPhone o en una valla publicitaria, o cualquier cosa intermedia.

Disculpa.

4

No puede. Un programa solo puede obtener las dimensiones físicas reales de una pantalla al interrogar a EDID ya que los valores devueltos por la API de Windows no son confiables. Un programa puede obtener los valores verdaderos para la resolución (por ejemplo, 1280 x 1024) y la pantalla de dpi, pero los navegadores no pueden hacer nada de esto por sí mismos.

Hay una confusión constante entre el "dpi física" de una pantalla y "dpi pantalla". El dpi físico, más propiamente llamado píxeles por pulgada, se obtiene dividiendo el ancho máximo de píxeles de la pantalla por el ancho físico (regla) en pulgadas. Los píxeles por pulgada están fijados por el proceso de fabricación. La pantalla dpi es un número que el usuario puede configurar a través del Panel de control y su único propósito es convertir un valor en pulgadas en una cantidad de píxeles. El valor de dpi de la pantalla configurable por el usuario no tiene ninguna relación directa con los ppp físicos (píxeles por pulgada) y es solo un número con un valor predeterminado de 96. No hay nada mágico en 96 o 120

Número de píxeles de pantalla = número de pulgadas x píxeles en pantalla
Es así de simple. El motivo 21 cm en un monitor de 23 pulgadas a 1920 x 1080 "se traduce" al ancho de una hoja A4 (21 cm) es porque con una diagonal de 23 pulgadas el ancho de la pantalla es de 20.05 pulgadas y 1920 píxeles en el la densidad de píxeles es de 95,76 píxeles por pulgada.
Con valor predeterminado de dpi de pantalla de 96, entonces para una pulgada: píxeles = 1 x 96 = 96 píxeles
La densidad de píxeles de la pantalla de 23 pulgadas es de 95,76 píxeles por pulgada, que coincide con el número de píxeles que se obtienen al especificar una longitud de una pulgada, con el valor de ppp de pantalla predeterminado de 96.

Si la ppp de la pantalla se cambia en el Panel de control o se cambia la resolución del video del monitor, entonces 21 cm no coincidirían con el ancho de una hoja de A4.

+0

¡Gran explicación sobre los antecedentes técnicos! Tienes razón: funciona en Ubuntu Linux 10.04 (tarjeta de gráficos Intel) con una pantalla externa de 1920x1200 de 24 "solo por accidente, simplemente teniendo suerte con los 96 ppp codificados. El tamaño con la pantalla interna del portátil (alta densidad) es totalmente incorrecto: el el rectángulo del ejemplo A4 se muestra como demasiado pequeño. – geekQ

Cuestiones relacionadas