Avoid iPhone layout while on a computer?

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.


the last hypeupdate provides that:


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

1 Like

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});

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

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.

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>

1 Like