I have created my website using adaptive layouts, meaning the page adjusts its size based on the screen size and device. However, when I select the "View Desktop Version" option on a mobile device (across all browsers and on all mobile devices), it still displays the mobile version. I would like to be able to switch to the desktop version even when on a mobile device. I have tried various approaches, but none have been successful. How can this be resolved? I found some topics regarding the issue here but no solutions yet.
You probably need to play around or remove the meta value for mobile device width.
Document Panel > Mobile Options > Viewport width
1 Like
Hi Max
Thanks for your suggestion. Unfortunately its doesn't work, no mater what I chose in the Viewport width.
maybe have your own button running a hype function with
hypeDocument.showLayoutNamed('desktop')
desktop being the name of the layout you want
Is it possible for you to post a zip of your .hype document? We might be able to better see what layouts you're using and what might be happening.
(If you are embedding into a .html page it would be good to share that too)
Thanks Mark, I tried that but that doesn't seem to work either.
Hi Jonathan, thanks for your response!
Here's a zip of my .hype document: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free
Sorry, I had to upload it on my WeTransfer because it's too big for uploading in the forum (32.7MB) .
Actually I don't really know what you mean with embedding but here's the link to the site: index
I also tried a responsive layout but that doesn't work at all with my layout.
Thanks!
Works for me on your project?
The Javascript below is set to run when a button on the scenes is clicked.
i.e
if (hypeDocument.customData.choice == 'desktop' ){
hypeDocument.customData.choice = 'Angepasst'
} else {
hypeDocument.customData.choice = 'desktop'
}
hypeDocument.showLayoutNamed(hypeDocument.customData.choice)
console.log(hypeDocument.customData.choice)
The only thing with this approach is if the page is reloaded it will revert, so some sort of localStorage may help with that.
Thanks, that works. I can switch on the mobile device to the desktop version. But if I scroll or if I click something on the desktop site it suddenly loads the mobile site
I did mention you may need to code for when the scene loads again, so it remembers what the last choice was using localStorage.
You have a lot of code related to scroll and changing locations. So I suspect some of it changing back is related to that but also in iOS dragging down will likely be interrupted as a request to refresh/reload the page.
I do not really want to dig into your code as to be honest it would take too long to try and figure out what you are trying to do with it, fix all the errors it is spawning due to code syntax errors and using jquery API's without the jquery library !!.
So here is a plain example using hypes global api and local storage.
It will remember the choice on refresh/reload as it gets that choice from the browsers local Storage and gives it to Hypes Global custom data to use with the buttons.
we have an init code on layout load on both layouts
// Get the lastChoice from local storage
var lastChoice = localStorage.getItem("lastChoice");
if (lastChoice != null){
//-- set the custom global data
hypeDocument.customData.choice = lastChoice
} else {
console.log("No lastChoice:" );
//-- set the local stoarge
localStorage.setItem('lastChoice', 'desktop');
//-- set the custom global data
hypeDocument.customData.choice = 'desktop'
}
console.log("The lastChoice:" + lastChoice);
if (hypeDocument.currentLayoutName() != lastChoice){
hypeDocument.showLayoutNamed(lastChoice)
}
and the code that is called when a button is clicked.
if (hypeDocument.customData.choice == 'desktop' ){
hypeDocument.customData.choice = 'mobile'
} else {
hypeDocument.customData.choice = 'desktop'
}
//-- set the local stoarge
localStorage.setItem('lastChoice', hypeDocument.customData.choice);
hypeDocument.showLayoutNamed(hypeDocument.customData.choice)
RequestLayout.hype.zip (41.1 KB)
2 Likes
You can just use the event … use this in head HTML:
function HypeLayoutRequest (hypeDocument, element, event) {
if (hypeDocument.forceLayoutName) {
return hypeDocument.forceLayoutName;
}
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback": HypeLayoutRequest});
Setting hypeDocument.forceLayoutName = 'some name' to a layout name locks it for the session (in your button callback for example). Setting it to an empty string, null or deleting that variable restores default auto switching.
1 Like
It looks like "Request Desktop Version" only changes the navigator.userAgent and not the default width of the page; so I guess this is why the viewport settings don't really have an effect.
So you should also be able to write a small mobile detection method and then use that in conjunction with some of the solutions above.
var isMobile = (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i) != null);
For example, if all your Desktop Layouts were named the same "Desktop Layout", you'd modify @MaxZieb's solution (just choosing it because it is less code) like so:
function HypeLayoutRequest (hypeDocument, element, event) {
var isMobile = (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i) != null);
if (isMobile == false) {
return "Desktop Layout";
}
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback": HypeLayoutRequest});
3 Likes