# iPhone view different to PC monitor view

**URL:** <https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113>\
**Category:** Questions\
**Created:** [April 6, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113 "2022-04-06T12:26:29Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bov/32/14199_2.png) [@Bov](https://forum.babylonjs.com/u/Bov)\
**Post date:** [April 6, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/1 "2022-04-06T12:26:30Z")

</div>

Hi there, I am hoping that someone can help me, as my issue is driving me nuts.  
My problem is with the iPhone displaying things differently to what I see in the monitor of my PC. Viewing on the iPhone seems to cut off the bottom of what is being viewed. For example, [take this view:](https://www.babylonjs-playground.com/#14EFVR#21) in the iPhone image below you can see that the buttons at the bottom are not in the scene fully, whereas the monitor image shows all of the buttons.  
I am trying to create a 3D piece that will work on most devices. Apple’s IOS is proving awkward. Any help would be appreciated.  
Thanks.

iPhone view:

 ![baby_iphone](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/3/b38ea6725a18e84ebd1c1e35255b612a5b79c0df.jpeg)

PC monitor view:

 ![baby_desktop](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/7/0755f8b3953c8d6ec1a7190046056a915d720dba.jpeg)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 6, 2022, 2:03pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/2 "2022-04-06T14:03:58Z")

</div>

this might be a css issue ? @RaananW might have an idea ?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 6, 2022, 2:08pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/3 "2022-04-06T14:08:08Z")

</div>

Seems like it!

Seems like the height on an iphone is not configured correctly. @sebavan , can you confirm that the playground is not working correctly in landscape mode on an iphone?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 6, 2022, 2:21pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/4 "2022-04-06T14:21:02Z")

</div>

Works unfortunately all good on my iphone ☹

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 6, 2022, 2:26pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/5 "2022-04-06T14:26:26Z")

</div>

The shared scene as well?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 6, 2022, 2:27pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/6 "2022-04-06T14:27:53Z")

</div>

Also @DarraghBurke - is there any resizing being done when using the gui based on window.innerHeight (or window.outerHeight)? This seems like the height is configured to be the canvas in full screen height (as opposed to the available height minus the header).

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 6, 2022, 2:35pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/7 "2022-04-06T14:35:49Z")

</div>

yup all good on iphone 13

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 6, 2022, 2:37pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/8 "2022-04-06T14:37:31Z")

</div>

Can I ask what iOS (and iphone) you are using? could it be that the browser is not in the latest version?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 6, 2022, 3:42pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/9 "2022-04-06T15:42:52Z")

</div>

I do not repro in 15.4.1 but can not downgrade to try other versions.

---

<div class="post-metadata">

**Author:** ![Bov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bov/32/14199_2.png) [@Bov](https://forum.babylonjs.com/u/Bov)\
**Post date:** [April 6, 2022, 4:56pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/10 "2022-04-06T16:56:59Z")

</div>

Hi, thanks to everyone. @RaananW at present I have an iPhone 7 plus and the software version 13.6. So, I am guessing that this maybe the problem. I am creating work for a university…I’m thinking not all students will have the most up to date phone/software. But I think I will need to try updating my IOS…always a bit reluctant to do so.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 6, 2022, 5:42pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/11 "2022-04-06T17:42:21Z")

</div>

I’m afraid this is something we do not control if this is a browser bug ☹

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 6, 2022, 5:47pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/12 "2022-04-06T17:47:11Z")

</div>

You can also use the fullscreen mode of the playground to avoid having the bar. Though not a perfect solution, it might be what you are looking for when used by older iphones. the fullscreen support is using full.html, for example:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/full.html#14EFVR%2321)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Bov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bov/32/14199_2.png) [@Bov](https://forum.babylonjs.com/u/Bov)\
**Post date:** [April 7, 2022, 12:17pm UTC](https://forum.babylonjs.com/t/iphone-view-different-to-pc-monitor-view/29113/13 "2022-04-07T12:17:27Z")

</div>

Hi all, I reluctantly upgraded my iPhone (in case of possible problems) and my issue has now gone.  
Thanks to all that replied.
