Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Device View

Web Component Device View


Thanks to this web component you can define personalized views depending on the device and the screen size. Device View uses mobile-detect.js to identify if the user's device is a desktop computer, a phone or a tablet.

Based on this you can decide which elements you want to make visible in each case to adapt the view presented and the user has a better experience. In addition you can also customize it based on the width of the screen indicating a minimum and/or maximum width under which an element should appear or not.

Here is an example of use.

Hello user, are you watching me from a desktopa phonea tablet. And yur screen is between 100 and 300 pixelsis between 301 and 600 pixelsis between 601 and 900 pixelsis more than 900 pixels

<h1 class="featurette-heading">
Hello user, are you watching me from
<span class="text-muted">
	<desktop-view>a desktop</desktop-view>
	<phone-view>a phone</phone-view>
	<tablet-view>a tablet</tablet-view>
</span>.
And your screen
<span class="text-muted">
	<device-view min-width="100" max-width="300">is between 100 and 300 pixels</device-view>
	<device-view min-width="301" max-width="600">is between 301 and 600 pixels</device-view>
	<device-view min-width="601" max-width="900">is between 601 and 900 pixels</device-view>
	<device-view min-width="901">is more than 900 pixeles</device-view>
</span>
</h1>

The url of this cloud web component is http://www.wpiece.com/p/14_32

Do not forget to include before the component's import the polyfill for web components.

To use it with a basic configuration, use the device-view tag, indicating the type of device that can view content: desktop, phone, tablet or mobile (mobile are phones and 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">
		Content that will be displayed if you use de indicated device type
	</device-view>
</body>
</html>

Use examples

<phone-view>
	Content that will be displayed if you use a phone
</phone-view>

Abbreviated use

You can use the component compactly with tags desktop-view, phone-view, tablet-view o mobile-view to make your code cleaner.

<device-view min-width="300" max-width="900">
	Content that will be displayed if your screen with is between 300 and 900 pixels.
</device-view>

Device width

For a more direct control of the visibility of the elements of your page you can indicate a minimum and/or maximum width using the attributes min-width and max-width. Along with the device type you can make combinations like: Tablet with screen width greater than 800 pixels.