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.
<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>
<phone-view> Content that will be displayed if you use a phone </phone-view>
<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>