Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to judge Android or IOS by vue". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to judge Android or IOS by vue" can help you solve the problem.

Vue judges whether Android or IOS has encountered such a demand at work recently.

The page written by vue needs to interact with Android and ios at the same time

For Android, execute the code: android.finishActivity ()

If IOS, execute the code:

Try {window.webkit.messageHandlers.finishActivity.postMessage (");} catch (error) {console.log ('WKWebView post message');} so we need to make a judgment

Is it Android or IOS: because it's a separate APP, it doesn't consider Wechat.

FinishActivity () {let ua = navigator.userAgent.toLowerCase (); / / android terminal let isAndroid = ua.indexOf ('Android') >-1 | | ua.indexOf (' Adr') >-1; / / ios terminal let isiOS =!! ua.match (/\ (I [^;] +; (U;)? CPU.+Mac OS X/); if (/ (iPhone | iPad | iPod | iOS) / i.test (navigator.userAgent)) {/ / ios console.log ("I am ios") / / here is the writing discussed with IOS, calling IOS's finishActivity method try {window.webkit.messageHandlers.finishActivity.postMessage (") } catch (error) {console.log ('WKWebView post message');}} else (/ (Android) / i.test (navigator.userAgent)) {/ / android console.log ("I am android") / / here is the method discussed with Android, calling Android's finishActivity method android.finishActivity () }}

Then you can interact with Android and IOS on one page at the same time!

The H5 terminal judges that Android and ios display different background images.

Html:

Css:

.index-cont {width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url ("https://cache.yisu.com/upload/information/20220412/112/15429.png") no-repeat; background-size: contain; margin: 0; padding-bottom: 199%; / / position: fixed Index-cont-phone {width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url ("https://cache.yisu.com/upload/information/20220412/112/15430.png") no-repeat; background-size: contain; margin: 0; padding-bottom: 199%; / / position: fixed;})

Js:

Export default {name: "index", data () {return {isApple:true,}},}, methods: {/ / decide whether it is Android or ios appDown () {var u = navigator.userAgent; var isiOS =!! u.match (/\ (I [^;] +; (U;))? CPU.+Mac OS X /); var isAndroid = u.indexOf ('Android') >-1 | | u.indexOf (' Adr') >-1 / / android terminal if (isiOS) {this.isApple = true} else if (isAndroid) {this.isApple = false}}, mounted () {/ / call to judge ios and Android method this.appDown () This is the end of the content about "how vue judges Android or IOS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.