Mobile detection / html5 codes not working

1

hey,

I'm an absolute newbie in hype - had classes in university and currently I'm building my own webpage. My teacher has shown a few tutorials, the mobile detection code he suggested e.g. looks like that, down below.

But unfortunately it doesn't work and I'm not aware where my mistake is.
I build everything from scratch, use WordPress, export it as an OAM, use an iframe, ... what else do you need to know?
I have no real draft to post here 'cause I'm already restart from scratch again.... not long and I'm going crazy, please help :smiley:

var isMobile = false; //initiate as false

	if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
   		|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
    	
   	if (isMobile == true){
   	
   		hypeDocument.showSceneNamed('mobile', hypeDocument.kSceneTransitionInstant);
   	
   	}
2

First, that's a lot of code for mobile detection.

Second, I'm not sure what it's doing. It seems unnecessary. If I'm trying to target mobile platforms, I usually just look at the operating system. The code has ‘navigator.userAgent’ but I'm not sure why there are so many letters.

But in general, that's problem #1… using userAgent to detect if the user is using a mobile device.

Here's a quote…

Note: It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!

…and that's the third point. Since you're using Hype, is it truly necessary to detect for mobile devices? If it's simply a matter of different designs for different screen sizes, then “layouts” might be a better solution.

You can see this on the promo page to “A Book About Hype”

It doesn't use navigator.userAgent. Instead, it's just flexible elements and “breakpoints” managed with Hype.

A generic template is available online if you want to look closer at what's going's on…
https://photics.com/free-template-tuesday-35-tumult-hype-webpage/

Some JavaScript is being used to better control the menu, but I'm using Hype's JavaScript API. What's the currentLayoutName… if it's “Small” do this, if it's “Medium” do that. That way, I'm working with the software.

Even if I wasn't using Hype, I probably would just use breakpoints in CSS with media queries.

Using Media Queries, along with other CSS, is a very precise way to manage how a webpage looks on different screen sizes — even orientation. Using media queries, the CSS could be changed if the view is portrait or landscape. Desktops / Laptops are typically in landscape. Mobile is often in portrait.

Yet, with Hype, I have a template using JavaScript to detect if the “window” is in Portrait or Landscape. That way, I can do more than just change the styles. Using JavaScript allows for even greater control. The example shows the text in the box being changed. Just a few lines of code can add a lot of versatility.

3

I think the main question is where are you using that code? You might have placed it in a spot that wouldn't work correctly (say if the hypeDocument variable isn't in scope).

It would be useful to send a zip of your .hype document and any related resources where that code is used.

4

Here's the link to the Portrait / Landscape template… Free Template Tuesday #36 – Tumult Hype “Orientation” – Photics.com

1 Like