Make all sketches easier to use on mobile

Topic

This issue is an invitation to discuss whether this is a problem - and if so, what should be done about it!

Two screenshots below show what is seen on mobile vs desktop for a sketch that is wider than it is longer (landscape rather than portrait) in the Getting Started tutorial. This means on mobile the sketch does not show the circle that should be there.

Though some sketches are not interactive on mobile (if they require keyboard presses for example), most should be viewable. One fix would be to ensure than on mobile all sketches are square. A more major fix would be to ensure that any interaction that aa sketch requires has both a desktop variant and mobile variant.

Should this extend to tutorials, examples, and references - or every sketch on the website?

Please feel free to jump in with your comments and ideas, but don't start any technical work or PRs just yet 🌱

Desktop	Mobile

Improvements

• Make sure that all sketches in examples, reference, and tutorials uniformly scale their iframe tag to fit the width (assigned to @webermayank)

Start by reviewing the Getting Started tutorial sketch and the iframe markup used across examples, references, and tutorials. Resolve the intended scope and responsive behavior with maintainers; done means the agreed sketches display correctly on mobile without losing their documented interactions.