Responsive Projects not being recognized correctly on mobile and tablet devices.

Forum|Forum|10 years ago
July 31, 2015
7 replies
1515 views

I am having issues with a Responsive Project being displayed correctly on mobile and tablet devices. When I use Adobe Edge Inspect to test on the mobile and tablet devices, it renders correctly in a vertical orientation, but not a horizontal orientation (device orientation). When I publish the project for devices, then upload the project to a web server for testing in a browser, I get the same results for the tablet, and the mobile phone does not recognize any mobile version. My problem is trying to get the mobile device to recognize the mobile version in a responsive project.

What I found:

On a tablet (iPad 2 - iOS 😎 I get the tablet version of the presentation when the device is vertical, and get a morphed desktop version when the device is horizontal. (These results were the same in Safari and Chrome browsers). When testing in Adobe Edge Inspect the tablet version works like it is suppose to in either orientation.

On the mobile device (iPhone 6 - iOS 😎 I get the tablet version when the device is in a vertical and horizontal orientation. It does not recognize the Mobile version of my responsive project at all (these results were the same in Safari and Chrome browsers). When testing in Adobe Edge Inspect, the phone does recognize the project in mobile version when vertical, but recognizes the tablet version in horizontal orientation.

I did not have access to other devices (i.e. Android) to see if the results are the same.

How I Figured this Out:

I created a new Responsive Project with only 1 slide and 1 button (the button is to pause the presentation). In the Desktop view I created a title "Desktop" and hid the title from other views. I did the same for the tablet view and mobile view, with "Tablet" and "Mobile" titles that are hidden from the other views. I then published the project for devices and uploaded it to a server to test. Here is the link to test.

So my questions is if anyone else is getting the same results as I am and if anyone knows of a solution. What I need the most is for mobile devices to recognize the correct version in a vertical orientation in a browser. I am hoping that this is not a browser/phone issue and is an easy fix.

Thanks!

This topic has been closed for replies.

Correct answer xr42nv

Also regarding your iPhone.

Your IPhone 6 from memory is 375px Viewport width, the CP default is 360. Therefore your iPhone 6 will grab the Tablet mode cause the published file is detecting your iPhone 6 width is greater than 360.

Open this site on your phone and confirm your width is 375 : What's my Viewport Size?

Then adjust (increase) your mobile breakpoints in captivate to your phone width. It should then grab your phone width.

G

Garr2798Author

Participant

Thanks everyone for the info/advice/suggestions/etc… xr42nv and windscorpion was right about the Viewport size and breakpoints. I started by digging out my old iPhone 4 & 5, and sure enough the original test worked as it should. I then went in and adjusted the breakpoints to fit a 375 px width, and after publishing it worked like it should. I did have to a little adjusting with the height for the mobile version because the control bar ended up about 2/3 the way down the screen, but the project recognized the mobile device and adjusted the control bar correctly. Thanks again for al your help!

xr42nvCorrect answer

Inspiring

Also regarding your iPhone.

Your IPhone 6 from memory is 375px Viewport width, the CP default is 360. Therefore your iPhone 6 will grab the Tablet mode cause the published file is detecting your iPhone 6 width is greater than 360.

Open this site on your phone and confirm your width is 375 : What's my Viewport Size?

Then adjust (increase) your mobile breakpoints in captivate to your phone width. It should then grab your phone width.

L

lubalovesjc

Participating Frequently

YES!!!! Thank you so much!!!! I finally got it to work. Thank you so much to all who entered comments.

xr42nv

Inspiring

As good as Edge inspect is, as a general rule, you should always check your courses on your devices as your likely to get a slightly different experience.

If your curious as to what the Width of your device is, you can open this site on your phone/Tablet in the Orientation (Portrait/Landscape) you desire and it will tell you your width: What's my Viewport Size?

xr42nv

Inspiring

Just out of curiosity, are your using the default breakpoints.1024, 768, 360.

IPAD in landscape mode has a view port of width: 1024, Height: 768. Therefore viewing in landscape (horizontal) mode the browser will automatically grab the Desktop version, cause It is detecting a viewport width of 1024.

That is not a bug, it s the technical spec of the tablet and Captivate Project Width. An Ipad is suppose to grab the Desktop mode in Landscape.

L

lubalovesjc

Participating Frequently

I am having the exact same issues. I can't get any help from the Adobe Support people - I sent them the test file I created, much like yours, but 5 slides. They just claim it works perfectly on their end.

windscorpion

Inspiring

I haven't had any problems viewing the mobile slides (iPhone 5c - also works on Windows Mobile) though haven't tried it on an iPhone 6. The screen is a bit bigger isn't it, maybe the responsive breakpoints need to be modified?