pwired Posted April 19, 2020 Share Posted April 19, 2020 Hi, Making a website responsive with the use of css is only one way. What do you guys think about using device.js for showing different website layouts on different devices ? Device.js is a media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing. Device.js will read all of the version links in your markup, and redirects to the appropriate URL that serves the correct version of your website for desktop, laptop, tablet and phone. Info:https://github.com/borismus/device.js/blob/master/README.md Here is how your HTML will look like: <head> <!-- Every version of your website should include a list of all versions. --> <link rel="alternate" href="http://foo.com" id="desktop" media="only screen and (touch-enabled: 0)"> <link rel="alternate" href="http://m.foo.com" id="phone" media="only screen and (max-device-width: 640px)"> <link rel="alternate" href="http://tablet.foo.com" id="tablet" media="only screen and (min-device-width: 641px)"> <!-- Viewport is very important, since it affects results of media query matching. --> <meta name="viewport" content="width=device-width"> <!-- Place the JS in the head to load as little of the page as possible before (potentially) redirecting. --> <script src="device.js"></script> </head> To see examples, on the top right click on the little arrow to select for different devices and see how it works: http://borismus.github.io/device.js/sample/desktop.html?force=1 1 Link to comment Share on other sites More sharing options...
LostKobrakai Posted April 20, 2020 Share Posted April 20, 2020 Device.js is 6 years old, which for a topic like media queries is ages ago. Generally I feel like if you really need to alter markup, and not just styles, for different devices use client side templating. Those cases should imo be a small minority, so it should concern the least amount/local to the problem code of your codebase possible. Having different domains is however like a sledgehammer everything on the server suddenly knows about. Generally media queries based on device size / touch capabilities won‘t give you a great picture anyways with today's devices. Take microsofts surface or ipad pros, which have resolutions bigger than some older laptops, touch and mouse support as well as alternatives like the apple pencil. There are more useful media queries in the pipeline about hover capabilities or coarseness of the pointer - finger vs. pencil. I wouldn‘t want to involve this complexity on the server side. 2 Link to comment Share on other sites More sharing options...
3fingers Posted April 20, 2020 Share Posted April 20, 2020 For some edgy situations where I cannot solve with just appropriate media queries logic I tend to use Mobile Detect, which uses the user agent string to determine the device in use. One use case for me was the need to swap an html5 <video> with a jpg on iOS devices, due to the fact that I could not autoplay on those devices. Link to comment Share on other sites More sharing options...
Recommended Posts