I’ve just finished this project: https://codepen.io/MelUK2017/full/LxxvpQ/
On a desktop it displays how I expect, including re-sizing as the window is made smaller/larger. On an iPhone though, it doesn’t display like I would expect it to.
In portrait mode it re-sizes, but I can’t scroll down the page. In landscape mode I can scroll horizontally and vertically, but I would expect it to re-size so horizontal scrolling isn’t needed. Can anyone spot anything I’ve done wrong?
After (a lot more) experimenting, and Googling, I’ve discovered that it works as I’d expect in the “debug” codepen view. Thought I’d share in case any one else runs into the same issue!
Try adding the most common meta viewport tag.
Thank you for the suggestion. I already have this in the “Stuff for head:” bit:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is that the correct one?
Yeah that is what I meant. If you have that it should work in debug if it works in normal view.
If I load the project in “pen” view on my phone, it re-sizes as expected in the 0.5x and 0.25x views, but it doesn’t let me scroll vertically down the page in the 1x view.
If I click on the action menu and choose “full page” it doesn’t re-size as expected, and if I force-load that same URL directly then it doesn’t let me scroll vertically down the page.
If I click on the action menu and choose “debug view” then it does do exactly what I expect it to, and it re-sizes and lets me scroll. I think it must be a bug with codepen and how it displays on phones in the first two scenarios.
Hi, I know this thread’s a little old, but I just came across a similar issue and wanted to add what I’d found to the conversation in case anyone else comes across this issue and is looking for an answer.
I think the reason the pen works properly in debug view is this. Debug view doesn’t load from within an iframe, it’s essentially a full website on its own. In all other views your pen is contained within an iframe. This seems to be a particular issue on iOS, as detailed in this blog post on Codepen:
Hope this answers somebody’s question about Codepen functionality on iOS!
Oh thank god. I re-coded my portfolio page almost 10 times thinking I was missing something. I built my most recent one from scratch. I have finally found the answer and it only took 3 months.
It is obviously a very good feature that is provided by such an advanced technology based iPhone 6s which is really amazing to satisfy the users’ satisfaction factor. The users having the same phone must know all these shortcut tricks that will be productive for them.