Avoid iPhone layout while on a computer?

(Troy N.) #1

Hello everyone,
I am creating a responsive website that has several different layouts per page. Is there a way/code that I can put in to avoid people seeing or going into the iPhone layout while on their computers and resizing the browser window smaller?

Thank you for any feedback.


(Hans-Gerd Claßen) #2

the last hypeupdate provides that:


may be of some help to detect wether mobile or not …

(Hans-Gerd Claßen) #3

this in the head should (hopefully) load only biggest layout when not mobile device …

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.5/mobile-detect.min.js"></script>
function layoutRequest(hypeDocument, element, event) {

var md = new MobileDetect(window.navigator.userAgent);
if (!md.mobile()){
var currSceneName = hypeDocument.currentSceneName(),
biggestSceneLayout = hypeDocument.layoutsForSceneNamed(currSceneName)[hypeDocument.layoutsForSceneNamed(currSceneName).length -1],
layoutName = biggestSceneLayout.name;
return layoutName
return false


  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});

Mobile with large dimensions showing desktop layouts
(Troy N.) #4

Awesome, that script worked perfectly. Thank you so much.

(Troy N.) #5

Well, I think i spoke a moment to soon. It did work when you click on preview inside Hype. But after I exported the file and then viewed it that way the page came up blank for some reason. I tried it on several different files and in different ways all with the same result. I will still have to play around with it to get that to work, but that is close. Thank you.

(Hans-Gerd Claßen) #6

add a protocol to the src

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.5/mobile-detect.min.js"></script>