Web Component Device View


Gracias a este web component podrás definir vistas personalizadas en función del dispositivo y del tamaño de pantalla. Device View utiliza mobile-detect.js para identificar si el dispostivo del usuario es un equipo de escritorio, un teléfono o una tablet.

En base a ello podrás decidir que elementos quieres que sean visibles en cada caso para adaptar la vista presentada y que el usuario tenga una mejor experiencia. Además también podrás personalizarla en base al ancho de pantalla indicando un ancho mínimo y/o máximo bajo el que un elemento debe aparecer o no.

Aquí te dejamos un ejemplo de uso.

Hola usuario, me estás viendo con un ordenadorun teléfono móviluna tablet. Y tu pantalla está entre 100 y 300 píxelesestá entre 301 y 600 píxelesestá entre 601 y 900 píxeleses de más de 900 píxeles

<h1 class="featurette-heading">
Hola usuario, me estás viendo con
<span class="text-muted">
	<desktop-view>un ordenador</desktop-view>
	<phone-view>un teléfono móvil</phone-view>
	<tablet-view>una tablet</tablet-view>
</span>.
Y tu pantalla
<span class="text-muted">
	<device-view min-width="100" max-width="300">está entre 100 y 300 píxeles</device-view>
	<device-view min-width="301" max-width="600">está entre 301 y 600 píxeles</device-view>
	<device-view min-width="601" max-width="900">está entre 601 y 900 píxeles</device-view>
	<device-view min-width="901">es de más de 900 píxeles</device-view>
</span>
</h1>

La url de este cloud web component es http://www.wpiece.com/p/14_32

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica utiliza la etiqueta device-view indicando el tipo de dispositivo que puede ver el contenido: desktop, phone, tablet o mobile (este último tipo incluye móviles y tablets).

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/14_32" />
</head>

<body>
	<device-view type="desktop">
		contenido que se visualizará si se accede con el tipo de dispositivo indicado
	</device-view>
</body>
</html>

Ejemplos de uso

<phone-view>
	contenido que se visualizará si se accedes desde un móvil
</phone-view>

Uso abreviado

Puedes usar el componente de forma compacta con las etiquetas desktop-view, phone-view, tablet-view o mobile-view para que tu código sea más limpio.

<device-view min-width="300" max-width="900">
	contenido que se visualizará si el ancho de pantalla está entre 300 y 900 píxeles.
</device-view>

Ancho de dispositivo

Para un control más directo de la visibilidad de los elementos de tu página puedes indicar un ancho mínimo y/o máximo utilizando los atributos min-width y max-width. Junto con el tipo de dispositivo podrás hacer combinaciones como: Tablet con ancho de pantalla mayor a 800 píxeles.