Home > Developer > Web Develop
There are times when you can use @media to control the page to show different effects at different resolutions, but sometimes you want to show a good page directly on your PC and another page in mobile. This time you can use Device.js to detect the device, and then open a different page (Device.js is a JS library that can be used to detect the device, operating system and direction). This approach, of course, requires a jump.
Suppose a m.html wants to be used for mobile display, pc.html wants to use it for PC-side display. This time can use index.html as the entrance, in
Show m.html when the device is mobile and tablet
Otherwise show pc.html
<!doctype html>varIsMobile =device.mobile (), istable=Device.tablet (); if(IsMobile | |istable) {window.open ("M.html", "_self"); } Else{window.open ("Pc.html", "_self"); }</script></body>where the Device.js code is as follows (function() { varPreviousdevice, _addclass, _doc_element, _find, _handleorientation, _hasclass, _orientation_event, _removeClass, _supports_orientation, _user_agent; Previousdevice=Window.device; Window.device= {}; _doc_element=window.document.documentElement; _user_agent=window.navigator.userAgent.toLowerCase (); Device.ios=function() { returnDevice.iphone () | | Device.ipod () | |Device.ipad (); }; Device.iphone=function() { return_find (' iphone '); }; Device.ipod=function() { return_find (' ipod '); }; Device.ipad=function() { return_find (' ipad '); }; Device.android=function() { return_find (' Android '); }; Device.androidphone=function() { returnDevice.android () && _find (' mobile '); }; Device.androidtablet=function() { returnDevice.android () &&!_find (' mobile '); }; Device.blackberry=function() { return_find (' blackberry ') | | _find (' BB10 ') | | _find (' Rim '); }; Device.blackberryphone=function() { returnDevice.blackberry () &&!_find (' tablet '); }; Device.blackberrytablet=function() { returnDevice.blackberry () && _find (' tablet '); }; Device.windows=function() { return_find (' windows '); }; Device.windowsphone=function() { returnDevice.windows () && _find (' phone ')); }; Device.windowstablet=function() { returnDevice.windows () && _find (' Touch '); }; Device.fxos=function() { return(_find (' (Mobile; ') | | _find (' (tablet; ')) && _find ('; rv: ')); }; Device.fxosphone=function() { returnDevice.fxos () && _find (' mobile '); }; Device.fxostablet=function() { returnDevice.fxos () && _find (' tablet '); }; Device.meego=function() { return_find (' Meego '); }; Device.mobile=function() { returnDevice.androidphone () | | Device.iphone () | | Device.ipod () | | Device.windowsphone () | | Device.blackberryphone () | | Device.fxosphone () | |Device.meego (); }; Device.tablet=function() { returnDevice.ipad () | | Device.androidtablet () | | Device.blackberrytablet () | | Device.windowstablet () | |Device.fxostablet (); }; Device.portrait=function() { returnMath.Abs (window.orientation)!== 90; }; Device.landscape=function() { returnMath.Abs (window.orientation) = = = 90; }; Device.noconflict=function() {Window.device=Previousdevice; return This; }; _find=function(needle) {return_user_agent.indexof (needle)!==-1; }; _hasclass=function(class_name) {varregex; Regex=NewREGEXP (class_name, ' I '); return_doc_element.classname.match (regex); }; _addclass=function(class_name) {if(!_hasclass (class_name)) { return_doc_element.classname + = "" +class_name; } }; _removeclass=function(class_name) {if(_hasclass (class_name)) {return_doc_element.classname = _doc_element.classname.replace (class_name, ""); } }; if(Device.ios ()) {if(Device.ipad ()) {_addclass ("iOS ipad tablet"); } Else if(Device.iphone ()) {_addclass ("iOS iphone mobile"); } Else if(Device.ipod ()) {_addclass ("iOS ipod mobile"); } } Else if(Device.android ()) {if(Device.androidtablet ()) {_addclass ("Android tablet"); } Else{_addclass ("Android mobile"); } } Else if(Device.blackberry ()) {if(Device.blackberrytablet ()) {_addclass ("BlackBerry tablet"); } Else{_addclass ("BlackBerry mobile"); } } Else if(Device.windows ()) {if(Device.windowstablet ()) {_addclass ("Windows tablet"); } Else if(Device.windowsphone ()) {_addclass ("Windows Mobile"); } Else{_addclass ("Desktop"); } } Else if(Device.fxos ()) {if(Device.fxostablet ()) {_addclass ("Fxos tablet"); } Else{_addclass ("Fxos Mobile"); } } Else if(Device.meego ()) {_addclass ("Meego Mobile"); } Else{_addclass ("Desktop"); } _handleorientation=function() { if(Device.landscape ()) {_removeclass ("Portrait"); return_addclass ("Landscape"); } Else{_removeclass ("Landscape"); return_addclass ("Portrait"); } }; _supports_orientation= "Onorientationchange"inchwindow; _orientation_event= _supports_orientation? "Orientationchange": "Resize"; if(Window.addeventlistener) {Window.addeventlistener (_orientation_event, _handleorientation,false); } Else if(window.attachevent) {window.attachevent (_orientation_event, _handleorientation); } Else{Window[_orientation_event]=_handleorientation; } _handleorientation ();}). Call ( This);
Of course, you can also use Device.js to detect devices individually.
The JavaScript method is as follows.
| Device | JavaScript Method |
|---|---|
| Mobile | Device.mobile () |
| Tablet | Device.tablet () |
| Ios | Device.ios () |
| Ipad | Device.ipad () |
| Iphone | Device.iphone () |
| Ipod | Device.ipod () |
| Android | Device.android () |
| Android Phone | Device.androidphone () |
| Android Tablet | Device.androidtablet () |
| BlackBerry | Device.blackberry () |
| BlackBerry Phone | Device.blackberryphone () |
| BlackBerry Tablet | Device.blackberrytablet () |
| Windows | Device.windows () |
| Windows Phone | Device.windowsphone () |
| Windows Tablet | Device.windowstablet () |
| Firefox OS | Device.fxos () |
| Firefox OS Phone | Device.fxosphone () |
| Firefox OS Tablet | Device.fxostablet () |
| Meego | Device.meego () |
For example, you can use the following code to detect whether the device is an iOS device
var isiphone = Device.iphone (), isipad = Device.ipad (); var Isios = Isiphone | | isipad; if (Isios) { alert ( "Is this IOS?") +isios ); }Or it can be used to control the load of M.CSS when the PC is loaded for mobile or tablet pc.css
if (IsMobile | istable) { document.write (' <link rel= ' stylesheet "href=" m.css "> '); } else{ document.write (' <link rel= ' stylesheet ' href= ' pc.css ' > '); }Use Device.js to detect devices and display different pages on different devices
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
